当前页面独立调用双swiper插件
程序员文章站
2024-03-25 12:25:28
...
<!-- banner -->
<div class="swiper-container swiper-container1"> //添加swiper-container1
<div class="swiper-wrapper">
<div class="swiper-slide banner1"></div>
<div class="swiper-slide banner2"></div>
<div class="swiper-slide banner3"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination swiper-pagination1"></div> //添加swiper-pagination1
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-prev1"></div> //添加swiper-button-prev1
<div class="swiper-button-next swiper-button-next1"></div> //添加swiper-button-next1
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar swiper-scrollbar1"></div> //添加swiper-scrollbar1
</div>
<div class="swiper-container server-wrap1200 swiper-container2"> //添加swiper-container2
<div class="swiper-wrapper">
<div class="swiper-slide clearfix">
<ul class="clearfix">
<li>互联网</li>
<li>市场商务</li>
<li>电子电气</li>
<li>人事行政</li>
<li>外语外贸</li>
<li>财经法务</li>
<li>教育咨询</li>
<li>媒体设计</li>
</ul>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination swiper-pagination2"></div> //添加swiper-pagination2
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-prev2"></div> //添加swiper-button-prev2
<div class="swiper-button-next swiper-button-next2"></div> //添加swiper-button-next2
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar swiper-scrollbar2"></div> //添加swiper-scrollbar2
</div>
调用:
var mySwiper = new Swiper('.swiper-container1', {
direction: 'horizontal',
autoplay: true,//可选选项,自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination1',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next1',
prevEl: '.swiper-button-prev1',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar1',
},
})
var mySwiper2 = new Swiper('.swiper-container2', {
direction: 'horizontal',
autoplay: false,//可选选项,自动滑动
// 如果需要分页器
pagination: {
el: '.swiper-pagination2',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar2',
},
})
推荐阅读