通过 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.

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.

Here's my 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>

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');

Any help is really appreciated

Link to my code http://codepen.io/veryrobert/pen/sHjwo

Link to the plugin https://github.com/bradbirdsall/Swipe

解决方案

This should work:

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

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.

Hope that helps.

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