如何使用Swiper在同一个页面上多个轮播组件

发布网友发布时间：2022-04-22 06:12

共1个回答

热心网友时间：2022-04-20 11:29

现在切入正题~~~这几天写前台的页面发现Swiper非常强大，公司项目又要求弄成响应式的所以项目里有整合Bootstrap，Swiper目前在用的过程中没有发现和Bootstrap有冲突，但是在其中的一个页面需要多个轮播组件。所以直接上代码吧
页面代码：
[html] view plain copy
<div class="swiper-container hidden-xs swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"></div>
<div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"></div>
<div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"></div>
</div>
<div class="swiper-pagination swiper-p1"></div>
</div>
<div class="swiper-container visible-xs-block swiper-container2">
<div style="height:51px;"> </div>
<div class="swiper-wrapper">
<div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"></div>
<div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"></div>
<div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"></div>
</div>
<div class="swiper-pagination swiper-p2"></div>
</div>