Backstretch jQuery 点导航

Question

我正在尝试使用点为后退滑块构建导航。

目前，我正在使用点的值在单击时更改为具有该值的幻灯片。

让它自动播放 1 或 2 张幻灯片，点击第一个点索引 returns 01 而不是 0。这会破坏自动播放滑块和导航。

谷歌搜索后我似乎找不到任何修复方法，有什么想法吗？

$(document).ready(function(){
 $(".slider").backstretch([
 "http://lw.dev.plx.mk/wp-content/uploads/2016/10/iStock_000015135168Large.jpg",
 "http://lw.dev.plx.mk/wp-content/uploads/2016/10/IMG_2961.jpg",
 "http://lw.dev.plx.mk/wp-content/uploads/2016/10/Global-Legend-White-conservatory-1-bespoke-external.jpg",
 "http://lw.dev.plx.mk/wp-content/uploads/2016/10/Buckley-3.jpg",  ],{
  duration:3000,
  fade:750,
 });
 $('#dot-0').addClass('selected');

 $('.dot').click(function() {
     $('.slider').backstretch("show", ($(this).attr('value')));
     console.log('Value - ' + ($(this).attr('value')));
     $('.dot').removeClass('selected');
     $(this).addClass('selected');
 });

 $('.slider').on("backstretch.before", function (e, instance, index) {
  console.log('Index - ' + index);
  var currentSlide = $('#dot-' + index);
  $('.dot').removeClass('selected');
  $(currentSlide).addClass('selected');
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<div class="slider" style="position: relative; z-index: 0; background: none;">
  <div class="slider-dots">
   <div class="dot" id="dot-0" value="0">x</div>
   <div class="dot" id="dot-1" value="1">x</div>
   <div class="dot" id="dot-2" value="2">x</div>
   <div class="dot" id="dot-3" value="3">x</div>
  </div>
</div>

Answer 1

 $('.dot').first().addClass('selected');
 
 var instance = $(".slider").data("backstretch");
 $('.dot').click(function () {
   var index = $('.dot').index( $(this) );
   $('.dot').removeClass('selected');
   $(this).addClass('selected');
   instance.show(index);
   return false;
 });
 
 $('.slider').on("backstretch.before", function (e, instance, index) {
  var currentSlide = $('#dot-' + index);
  $('.dot').removeClass('selected');
  $(currentSlide).addClass('selected');
 });

用上面的代码修复

Backstretch jQuery 点导航

Backstretch jQuery dot navigation

jquery

slider

jquery-plugins

jquery-backstretch