问题描述
我创建了一个带有缩略图的圆滑滑块,需要在其中selectFocus
的最后一个中间或右侧滑动。我正在使用以下代码,但无法正常工作。如果我将centerMode:true
和infinite: true
设置为在左侧和右侧之间留有白色缝隙
<div class="wrapper">
<div class="slider img_gallery_single">
<div>
<figure>
<img src="img/1.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/2.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/3.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/4.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/5.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/6.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/7.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/8.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/9.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/10.jpg" alt="" />
</figure>
</div>
</div>
<div class="slider img_gallery_thumb_nav">
<div>
<figure>
<img src="img/1.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/2.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/3.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/4.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/5.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/6.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/7.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/8.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/9.jpg" alt="" />
</figure>
</div>
<div>
<figure>
<img src="img/10.jpg" alt="" />
</figure>
</div>
</div>
<script>
$(document).ready(function(){
$('.img_gallery_single').slick({
slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: false,infinite: true,useTransform: true,speed: 400,cssEase: 'cubic-bezier(0.77,0.18,1)',});
$('.img_gallery_thumb_nav')
.on('init',function(event,slick) {
$('.img_gallery_thumb_nav .slick-slide.slick-current').addClass('is-active');
})
.slick({
autoSlidesToShow: true,//slidesToShow: 5,slidesToScroll:1,dots: false,focusOnSelect: true,centerMode:true,variableWidth: true,});
$('.img_gallery_single').on('afterChange',slick,currentSlide) {
$('.img_gallery_thumb_nav').slick('slickGoTo',currentSlide);
var currrentNavSlideElem = '.img_gallery_thumb_nav .slick-slide[data-slick-index="' + currentSlide + '"]';
$('.img_gallery_thumb_nav .slick-slide.is-active').removeClass('is-active');
$(currrentNavSlideElem).addClass('is-active');
});
$('.img_gallery_thumb_nav').on('click','.slick-slide',function(event) {
event.preventDefault();
var goToSingleSlide = $(this).data('slick-index');
$('.img_gallery_single').slick('slickGoTo',goToSingleSlide);
});
});
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)