veryrobert veryrobert - 1 year ago 125
HTML Question

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download