html區域
<!-- 轮播图区域开始-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/3.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/4.jpg" alt="">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- 轮播图区域结束 -->
js區域
<script src="./js/swiper-bundle.min.js"></script>
<script>
//轮播图区域
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
dynamicBullets: true,
},
effect: 'fade',
spaceBetween: 20,
loop: true,
slidesPerView: 'auto',
loopedSlides: 5,
autoplay: {
delay: 2000,
disableOnInteraction: false,
}
});
</script>