swiper - 使用 Swiper.js，通过项目符号导航有时无法正确滑动

Question

我在我的项目中使用 swiper.js，有时（可能是 10 次中的 1 次）通过单击相关项目符号进行的导航不起作用 - 而是转到上一张幻灯片。我的 swiper 配置对象确实包含clickable: true分页。

标签： swiper

Answer 1

检查此代码。我认为有人在这里遇到了同样的问题

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');