在Swipe JS中使用项目符号作为导航

Use bullets as navigation with Swipe JS

本文关键字：符号 导航 项目 Swipe JS      更新时间：2023-09-26

我已经绞尽脑汁好几个小时了，如果你能帮我解决这个问题，我真的很感激。我知道这将是一个简单的解决方案，但到目前为止进展并不顺利。

我使用滑块滑动Js，我想使用一些子弹作为导航(没有下一个和上一个)。我试图使用getPos()一个内置的滑动功能，但我一直在我的控制台中得到一个"无方法"错误。

这是我的HTML:

<section id='slider' class='swipe full-width'>
      <div class='swipe-wrap'>
        <div class="slide">
          <!-- content -->
        </div>
        <div class="slide">
          <!-- content -->
        </div>
 </div>
</section>
 <div class="counter">
      <ul id='position'>
          <li class="on"></li>
          <li></li>
          <li></li>
       </ul>
 </div>

这是我的JS:我把它拉回到正常工作状态。我只是想点击一个点，让它转到相应的幻灯片上。

   var slider = Swipe(document.getElementById('slider'), {
      auto: 6000,
      continuous: true,
      callback: function(pos) {
        var i = bullets.length;
        while (i--) {
          bullets[i].className = ' ';
        }
          bullets[pos].className = 'on';
      }
    });
  var bullets = document.getElementById('position').getElementsByTagName('li');

任何帮助都是非常感谢的

链接到我的代码http://codepen.io/veryrobert/pen/sHjwo

链接到插件https://github.com/bradbirdsall/Swipe

应该可以:

$('li').on('click', function(event){
  event.preventDefault();
  var index = $("li").index(event.currentTarget);
  slider.slide(index);
});

基本上，您需要计算相应的li的索引，并将其传递给swipes .slide方法。然后将滑动到所请求的幻灯片。

希望对你有帮助。

要使项目符号可点击，您可以使用插件的分页模块并按如下方式初始化它:

<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<div class="swiper-pagination"></div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    // Default parameters
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>

通过这种方式，swiper负责在作为参数给出的元素中创建子弹，并设置clickable: true

记住要在Swiper中包含/导入分页模块，或者包含/导入Swipern包以使导航工作:

从NPM

: 

// core version + pagination module:
import Swiper, { Pagination } from 'swiper';
// configure Swiper to use module
Swiper.use([Pagination]);
// init Swiper:
const swiper = new Swiper(...);
从CDN

: 

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
相关文章：