使用项目符号作为Swipe JS导航 [英] Use bullets as navigation with Swipe JS

问题描述

我已经将头部从墙壁上撞了几个小时，对此我非常感谢.我知道这将是一个简单的解决方案，但到目前为止，效果并不理想.

I've been banging my head off a wall for a few hours and I'd really appreciate some help with this. I know it's going to be easy solution but so far it's not going well.

我正在将Swipe Js用于滑块，并且我想使用一些项目符号作为导航(没有下一个和上一个).我尝试使用内置的滑动功能getPos()，但在控制台中始终出现无方法"错误.

I'm using Swipe Js for a slider and I want to use some bullets as navigation (without the next and prev). I tried to use getPos() a built in swipe function but I keep getting a 'no method' error in my console.

这是我的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:我已将其恢复为正常工作.我只想单击一个点，然后使其转到相应的幻灯片.

Here's my JS: I've pulled it back to what's working. I just want to click on a dot and make it go to the corresponding slide.

   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 的索引，并将其传递给滑动 .slide 方法.然后，它将滑动到请求的幻灯片.

Basically, you need to workout the index of corresponding li and pass that to swipes .slide method. This will then slide to the requested slide.

希望有帮助.

这篇关于使用项目符号作为Swipe JS导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！