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

回答1:

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.

来源：https://stackoverflow.com/questions/22328040/use-bullets-as-navigation-with-swipe-js

标签

javascript

html

slider

swipe.js