之前在公司是做后端的,现在回家这N线城市里的小公司什么都要自己来
,年轻就多学学吧~~~~~
现在切入正题~~~这几天写前台的页面发现Swiper非常强大,公司项目又要求弄成响应式的所以项目里有整合
Bootstrap,Swiper目前在用的过程中没有发现和Bootstrap有冲突,但是在其中的一个页面需要多个轮播组件。所以直接上代码吧
页面代码:
<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>
var swiper = new Swiper('.swiper-container1', {这里也感谢下群里的前端朋友,给的指点~~本人小菜其实这样的用法官网已经有给出了(状态不好,扫一眼没注意呀!) ,人状态不好脑子容易短路呀~~~
pagination: '.swiper-p1',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
mousewheelControl: true
});
var swiper2 = new Swiper('.swiper-container2', {
pagination: '.swiper-p2',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
mousewheelControl: true
});
Swiper官网演示地址:
官网横竖轮播嵌套的例子