如何解决具有自定义分页的无限循环 swiper
我正在尝试使用自定义分页制作无限循环滑块。当幻灯片不那么长时它正在工作。例如,当您单击“转到 2”时幻灯片比视口长时,滑动器会将第一张幻灯片移动到屏幕左侧,然后您必须等待第二张幻灯片显示。
如何使分页从对应的右侧幻灯片的开头滑动?
我正在使用自定义分页,因为当您单击它时,它必须更快地将您滚动到您想要的幻灯片。 swiper 的基本速度需要慢,以便您可以阅读幻灯片。
var galleryThumbs = new Swiper('.gallery-thumbs',{
spaceBetween: 0,slidesPerView: 1,observer: true,simulateTouch: true,slideToClickedSlide: true,watchSlidesVisibility: true,disableOnInteraction: false,watchSlidesProgress: true,loopPreventsSlide: false,initialSlide: 1,});
var galleryTop = new Swiper('.gallery-top',loop: true,speed: 35000,freeMode: true,centeredSlides: false,slidesPerView: 'auto',initialSlide: -1,autoplay: {
delay: 0,},thumbs: {
swiper: galleryThumbs
}
});
$(".thumb-holder").click(function() {
var tabData = $(this).attr('data-index');
tabData = tabData - 1;
galleryTop.slideToLoop(tabData,400);
galleryTop.update();
});
.thumb-holder {
display: inline-block;
}
.gallery-top .swiper-slide {
height: 50px;
display: inline-block;
width: auto !important;
}
.gallery-top .swiper-wrapper {
-webkit-transition-timing-function: linear!important;
-o-transition-timing-function: linear!important;
transition-timing-function: linear!important;
-moz-osx-transition-timing-function: linear!important;
}
.gallery-thumbs .swiper-slide {
display: inline-block;
width: auto !important;
padding: 0 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-inner" style="width: 1200px; background: #7f7fff;">1</div>
</div>
<div class="swiper-slide">
<div class="swiper-inner" style="width: 400px; background: #f35747;">2</div>
</div>
<div class="swiper-slide">
<div class="swiper-inner" style="width: 100px; background: #91605b;">3</div>
</div>
<div class="swiper-slide">
<div class="swiper-inner" style="width: 1200px; background: #c8bebd;">4</div>
</div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="thumb-holder" data-index="0">Go to 1</div>
</div>
<div class="swiper-slide">
<div class="thumb-holder" data-index="1">Go to 2</div>
</div>
<div class="swiper-slide">
<div class="thumb-holder" data-index="2">Go to 3</div>
</div>
<div class="swiper-slide">
<div class="thumb-holder" data-index="3">Go to 4</div>
</div>
</div>
</div>
示例如下:https://jsfiddle.net/0y3owdtj/1/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。