veryrobert veryrobert - 10 months ago 72
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 class="slide">
<!-- content -->

<div class="counter">
<ul id='position'>
<li class="on"></li>

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

Link to the plugin

Answer Source

This should work:

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

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.