通过 Swipe JS 使用项目符号作为导航答案

【问题标题】：Use bullets as navigation with Swipe JS通过 Swipe JS 使用项目符号作为导航
【发布时间】：2014-04-15 04:50:12
【问题描述】：

我已经把头从墙上撞了几个小时了，我非常感谢一些帮助。我知道这将是一个简单的解决方案，但到目前为止进展并不顺利。

我正在使用 Swipe 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

【问题讨论】：

标签： javascript html slider swipe.js

【解决方案1】：

这应该可行：

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

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

希望对您有所帮助。

【讨论】：

完美，非常感谢您的帮助。我真的很感激。如果其他人需要，这是一支更新的笔。 codepen.io/veryrobert/pen/sHjwo
我刚注意到的一个问题是，现在计时器搞砸了，有办法重置它吗？还是应该将其添加到回调中？
“自动”在用户与之交互后停止工作。恐怕我在文档中找不到任何提及如何重新启动它的内容。
别担心，Gary，我想我可能会在这种特殊情况下摆脱 swipe js 并使用具有我需要的内置功能的东西。非常感谢您在这方面的时间和帮助。再次感谢。
好主意，找一个最适合你的，而不是破解它。乐意效劳。我并没有真正使用过很多其他的，因为我真的在触摸设备上滑动感觉如何。祝你好运！

【解决方案2】：

要使子弹可点击，您可以使用插件的分页模块并按如下方式对其进行初始化：

<!-- 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>

【讨论】：