swipejs插件 - 分页错误

Question

我正在尝试将swipejs滑块实现到我的网站。 一切都很好，除了我需要设置分页点。 我已按照此交换开始add pagination navigation to swipejs carousel

我的问题是，当您单击最后一个分页点两次时，我的所有幻灯片图像会同时显示。我认为这与已经实现的index（）javascript逻辑有关，但我很难过如何防止这种情况发生。

HTML：

<div id='swipeslider' class='swipe'>
  <div class='swipe-wrap'>
    <div>
      <a><img></a>
    </div>
    <div>
      <a><img></a>
    </div>
    <div>
      <a><img></a>
    </div>
    <div>
      <a><img></a>
    </div>
    <div>
      <a><img></a>
    </div>
    <div>
      <a><img></a>
    </div>
  </div> <!-- swipe-wrap -->
  <nav id="swipenav_container">
    <ul id="swipenav">
      <li><span class="dot"></span></li>
      <li><span class="dot"></span></li>
      <li><span class="dot"></span></li>
      <li><span class="dot"></span></li>
      <li><span class="dot"></span></li>
      <li><span class="dot"></span></li>
    </ul>
  </nav>
</div> <!-- #swipeslider -->

jquery的：

 window.mySwipe = new Swipe(document.getElementById('swipeslider'), {
      startSlide: 1,
      speed: 400,
      auto: 3000,
      continuous: true,
      disableScroll: false,
    });

    var $navLi = $('#swipenav li');
    $navLi.on ('click', function () {
      window.mySwipe.slide($(this).index() + 1, 200);
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    });

CSS：

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

/* center slide images in slide-wrap div */
.swipe-wrap img {
  margin: 0 auto;
}

#swipenav {
  text-align: center;
}

#swipenav_container {
  margin-top: 20px;
}

#swipenav_container ul {
  margin: 0 auto;
  padding: 0;
}

#swipenav li {
  display: inline;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #666;
  margin: 3px;
}

.dot:hover {
  background-color: #999;
}

.selected .dot {
  background-color: #fff;
}