一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分，要保留默认的类名swiper-container。
相同页面，轮播图1
相同页面，轮播图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