后伸jQuery点导航

Question

我正在尝试构建一个使用点的后伸滑块导航。

目前，我正在使用点的值，以更改为幻灯片与该值的点击。

让它自动播放1或2个幻灯片，点击第一个点，索引返回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');
	});

​

修正了上面的代码