如何在swiper中使用两个轮播效果?

一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分,要保留默认的类名swiper-container。

swiper轮播图

相同页面,轮播图1

swiper轮播图

相同页面,轮播图2

HTML

<div class="swiper-container" id="swiper0">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(./style/b01.jpg)"></div>
...
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="/swt/">
<div class="hotScrollItem">
<span class="mould">iPhone6</span>
<span class="fault">外屏碎(显示正常)</span>
<div class="lineDiv"><span></span>
</div><span class="money">维修咨询</span>
</div>
</a>
</div>
...
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-black"></div>
</div>

JS

<script>
var swiper0 = new Swiper ('#swiper0', {
loop: true,// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
var swiper1 = new Swiper ('#swiper1', {
loop: true,
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
备注:

new Swiper(swiperContainer, parameters)用于初始化一个Swiper,返回初始化后的Swiper实例。

swiperContainer : 必选,HTML元素或者string类型,Swiper容器的css选择器,例如“.swiper-container”。

parameters : 可选,参见配置选项

参考官网网址:http://www.swiper.com.cn/api/start/2014/1218/140.html

滚动至顶部
扫描微信二维码联系我们 关闭