多个swiper插件在同一个页面的用法。

时间：2020-05-15 23:58:01 阅读：149 评论：0 收藏：0 [点我收藏+]

<p class="slip1">小米净水器500G 白色</p>

<p class="slip2">直出纯净水更畅快</p>

</div>

<p class="slip1">米家洗洁精套装 白色</p>

</div>

<p class="slip1">RedmiBook 14 增强版 白色</p>

<p class="slip2">十代酷睿更强劲</p>

</div>

<p class="slip1">小米净水器500G 白色</p>

<p class="slip2">直出纯净水更畅快</p>

</div>

<p class="slip1">米家洗洁精套装 白色</p>

</div>

<p class="slip1">RedmiBook 14 增强版 白色</p>

<p class="slip2">十代酷睿更强劲</p>

</div>

<p class="slip1">米家洗洁精套装 白色</p>

</div>

<p class="slip1">RedmiBook 14 增强版 白色</p>

<p class="slip2">十代酷睿更强劲</p>

</div>

</div>

var swiper = new Swiper(‘.swiper-container‘, {

spaceBetween: 30,

centeredSlides: true,

autoplay: {

delay: 2500,

disableOnInteraction: false,

pagination: {

el: ‘.swiper-pagination‘,

clickable: true,

navigation: {

nextEl: ‘.swiper-button-next1‘,

prevEl: ‘.swiper-button-prev1‘,

});

</script>

var swiper = new Swiper(‘.swiper-container2‘, {

slidesPerView: 4,

spaceBetween: 30,

pagination: {

el: ‘.swiper-pagination2‘,

clickable: true,

navigation: {

nextEl: ‘.next‘,

prevEl: ‘.prev‘,

});

给他的外层div，分别加上另一个class名，并在下面的初始化修改加上的class名，这样保证不会互相影响。

在css样式的设计上也可以分别设置。

就是这样

多个swiper插件在同一个页面的用法。

原文：https://www.cnblogs.com/1171899qq/p/12897678.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)