veryrobert veryrobert - 2 months ago 19
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

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.

Comments