一页上有两个滑动滑块 [英] Two swiper sliders on one page
问题描述
我在页面上使用滑动滑块.
现在我要添加另一个.我被复制了第一个滑块，并像我用js初始化一样更改了他的类.两个滑块都可以工作，但是在第二个滑块中似乎忽略了配置参数...我有1个可见的滑块而不是10个，spaceBetween参数没有更改任何设置，我没有设置1或500个......
Now i want add another one. I was copied first slider and change his class the same thing i do with js initialization. Both sliders work but in second slider looks like configuration parameters are ignored... I have 1 visible slide not 10, spaceBetween parameter not changing anything i set 1 or 500 nothing...
我做错了什么?
HTML:
<div class="swiper-container slider1">
<div class="swiper-wrapper">
<div class="swiper-slide">
slide 1
</div>
<div class="swiper-slide">
slide 2
</div>
...
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container slider2">
<div class="swiper-wrapper">
<div class="swiper-slide">
slide 1
</div>
<div class="swiper-slide">
slide 2
</div>
...
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
JS:
var swiper = new Swiper('.slider1', {
slidesPerView: 3,
paginationClickable: true,
lazyLoading: true,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
var newSwiper = new Swiper('.slider2', {
slidesPerView: 10,
paginationClickable: true,
lazyLoading: true,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
问题出在-引导程序类tab-pane中的swiper滑块位于引导程序选项卡，因此它是隐藏的，单击选项卡后便显示出来.
So problem was - html swiper slider was in bootstrap class tab-pane it is bootstrap tabs so it was hidden and after click on tab it was show up.
第二个滑块的原始js:
So original js for second slider:
var newSwiper = new Swiper('.slider2', {
slidesPerView: 10,
paginationClickable: true,
lazyLoading: true,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
和解决方案:
$(".locality-tab").on("click",function(){
setTimeout(function () {
newSwiper.update();
}, 400);
});
.locality-tab是按钮鞭状开关内容上的类.
.locality-tab is class on button whitch switches contents.
推荐答案
您的代码在以下代码段中正常运行.
Your code is working fine check below snippet.
如果有1张可见的幻灯片，则 spaceBetween 配置没有任何意义.
In case you have 1 visible slide, in that case spaceBetween configuration has no meaning.
如果要使用 spaceBetween 配置，则需要将 slidesPerView 值设置为至少2.
You need to set slidesPerView value to atleast 2, if you want to make use spaceBetween configuration.
spaceBetween :幻灯片之间的距离，以px为单位.
spaceBetween: Distance between slides in px.
slidesPerView :每个视图的幻灯片数量(同时在滑块容器上可见的幻灯片).
slidesPerView: Number of slides per view (slides visible at the same time on slider's container).
var swiper = new Swiper('.slider1', {
slidesPerView: 2,
spaceBetween: 20, //it is only effective when slidesPerView >=2
paginationClickable: true,
lazyLoading: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
var newSwiper = new Swiper('.slider2', {
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 5,
lazyLoading: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<style>
.swiper-slide{
color:white;
padding:10px;
}
</style>
</head>
<body>
<div class="swiper-container slider1 row">
<div class="swiper-wrapper col-md-12">
<div class="swiper-slide col-md-4 text-center" style="background-color:blue;">
slide 1
</div>
<div class="swiper-slide col-md-4 text-center"
style="background-color:black;">
slide 2
</div>
<div class="swiper-slide col-md-4 text-center"
style="background-color:yellow;">
slide 3
</div>
<div class="swiper-slide col-md-4 text-center"
style="background-color:red;">
slide 4
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<br>
<br>
<div class="swiper-container slider2 row">
<div class="swiper-wrapper col-md-12">
<div class="swiper-slide col-md-4 text-center"
style="background-color:red;">
slide 1
</div>
<div class="swiper-slide col-md-4 text-center"
style="background-color:yellow;">
slide 2
</div>
<div class="swiper-slide col-md-4 text-center"
style="background-color:blue;">
slide 3
</div>
<div class="swiper-slide col-md-4 text-center"
style="background-color:green;">
slide 4
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
</body>
</html>
有关更多配置，请访问刷卡参数
For more configurations visit Swiper Parameters
这篇关于一页上有两个滑动滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
