Backstretch jQuery点导航
问题描述:
我正在尝试使用点构建一个backstretch滑块的导航。Backstretch jQuery点导航
目前我正在使用点的值更改为具有该值的幻灯片。
让它自动播放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>
答
\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 });
修正了上面的代码