<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樣式的設計上也可以分別設置。
就是這樣