<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide2 slide1">
<div class="sli1"><img src="/img/sy/fla1.jpg" alt=""></div>
<p class="slip1">小米净水器500G 白色</p>
<p class="slip2">直出纯净水更畅快</p>
<p class="slip3"><span>1399</span>元<del>2199元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide2">
<div class="sli1"><img src="/img/sy/fla2.jpg" alt=""></div>
<p class="slip1">米家洗洁精套装 白色</p>
<p class="slip2">感应出泡，高效清洁</p>
<p class="slip3"><span>69</span>元<del>79元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide3">
<div class="sli1"><img src="/img/sy/fla3.jpg" alt=""></div>
<p class="slip1">RedmiBook 14 增强版 白色</p>
<p class="slip2">十代酷睿更强劲</p>
<p class="slip3"><span>4799</span>元<del>49999元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide1">
<div class="sli1"><img src="/img/sy/fla1.jpg" alt=""></div>
<p class="slip1">小米净水器500G 白色</p>
<p class="slip2">直出纯净水更畅快</p>
<p class="slip3"><span>1399</span>元<del>2199元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide2">
<div class="sli1"><img src="/img/sy/fla2.jpg" alt=""></div>
<p class="slip1">米家洗洁精套装 白色</p>
<p class="slip2">感应出泡，高效清洁</p>
<p class="slip3"><span>69</span>元<del>79元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide3">
<div class="sli1"><img src="/img/sy/fla3.jpg" alt=""></div>
<p class="slip1">RedmiBook 14 增强版 白色</p>
<p class="slip2">十代酷睿更强劲</p>
<p class="slip3"><span>4799</span>元<del>49999元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide2">
<div class="sli1"><img src="/img/sy/fla2.jpg" alt=""></div>
<p class="slip1">米家洗洁精套装 白色</p>
<p class="slip2">感应出泡，高效清洁</p>
<p class="slip3"><span>69</span>元<del>79元</del></p>
</div>
<div class="swiper-slide swiper-slide2 slide3">
<div class="sli1"><img src="/img/sy/fla3.jpg" alt=""></div>
<p class="slip1">RedmiBook 14 增强版 白色</p>
<p class="slip2">十代酷睿更强劲</p>
<p class="slip3"><span>4799</span>元<del>49999元</del></p>
</div>
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div> -->
<!-- Add Arrows -->
<div class="swiper-button-next next"></div>
<div class="swiper-button-prev prev"></div>
</div>
</div>
<script>
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>
<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样式的设计上也可以分别设置。
就是这样