Backstretch jQuery點導航

Question

我正在嘗試使用點構建一個backstretch滑塊的導航。

目前我正在使用點的值更改爲具有該值的幻燈片。

讓它自動播放1或2張幻燈片，並點擊第一個點索引返回01而不是0.然後打破自動運動滑塊以及導航。

我似乎無法找到任何修正後谷歌搜索，任何想法？

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

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

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

<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;"> 
 
\t \t <div class="slider-dots"> 
 
\t \t \t <div class="dot" id="dot-0" value="0">x</div> 
 
\t \t \t <div class="dot" id="dot-1" value="1">x</div> 
 
\t \t \t <div class="dot" id="dot-2" value="2">x</div> 
 
\t \t \t <div class="dot" id="dot-3" value="3">x</div> 
 
\t \t </div> 
 
</div>

Answer 1

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

修正了上面的代碼