With Swiper.js, navigation via bullets sometimes doesn't go to correct slide

Question

I'm using swiper.js in my project and sometimes (maybe 1 out of 10 times), navigation by clicking the associated bullet does not work - it instead goes to the previous slide. My swiper config object does contain clickable: true for the pagination.

Answer 1

Check this code. I think someone had the same problem here

HTML

<h1>Swipe 2</h1>

<div id='slider' style='max-width:500px;margin:0 auto' class='swipe'>
  <div class='swipe-wrap'>
    <div><b>1</b></div>
    <div><b>2</b></div>
    <div><b>3</b></div>
   
  </div>
</div>
    
  <div class="counter content" style='text-align:center;padding-top:20px;'>
                 <ul id='position'>
                      <li class="on"></li>
                      <li ></li>
                      <li ></li>
                </ul>
  </div>
    
<div style='text-align:center;padding-top:20px;'>
  
  <button onclick='slider.prev()'>prev</button> 
  <button onclick='slider.next()'>next</button>

</div>

<script src='swipe.js'></script>

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  -webkit-text-size-adjust:none;
  font-family:sans-serif;
  min-height:416px;
}
h1 {
  font-size:33px;
  margin:50px 0 15px;
  text-align:center;
  color:#212121;
}
h2 {
  font-size:14px;
  font-weight:bold;
  color:#3c3c3c;
  margin:20px 10px 10px;
}
small {
  margin:0 10px 30px;
  display:block;
  font-size:12px;
}
a {
  margin:0 0 0 10px;
  font-size:12px;
  color:#3c3c3c;
}


html, body {
  background: #f3f3f3;
}

#console {
  font-size: 12px;
  font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  color: #999;
  line-height: 18px;
  margin-top: 20px;
  max-height: 150px;
  overflow: auto;
}

#slider div b {
  display:block;
  font-weight:bold;
  color:#14ADE5;
  font-size:20px;
  text-align:center;
  margin:10px;
  padding:100px 10px;
  box-shadow: 0 1px #EBEBEB;
  background: #fff;
  border-radius: 3px;
  border: 1px solid;
  border-color: #E5E5E5 #D3D3D3 #B9C1C6;
}

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

.counter {
  height: 55px;
  ul {
    text-align: center;
    li {
      // padding: 5px;
      display: inline-block;
      height: 10px;
      width: 10px;
      border: solid 2px #404041;
      border-radius: 10px;
      margin: 2.5px;
      &.on {
        background: #404041;
      }
    }
  }
}

JAVASCRIPT

var elem = document.getElementById('slider');
        var slider =
        Swipe(document.getElementById('slider'), {
          auto: 10000,
          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');

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

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');