1.引入swiper.js和swiper.css
2.添加代碼
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../res_im/banner_bg.png" alt="">1
</div>
<div class="swiper-slide">
<img src="../res_im/banner_bg.png" alt="">2
</div>
<div class="swiper-slide">
<img src="../res_im/banner_bg.png" alt="">3
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
3.css樣式
.swiper-container {//輪播圖整體樣式
overflow: hidden;
width: 16rem;
height: 8.911111rem;
position: relative;
z-index: 0;
}
.swiper-container>.swiper-pagination {//分頁小圓點整體的樣式
width: 3.488889rem;
height: .377778rem;
position: absolute;
top: .333333rem;
left: 50%;
margin-left: -1.744444rem;
display: flex;
justify-content: space-between;
}
.swiper-container>.swiper-pagination .swiper-pagination-bullet {//當前選中的小圓點的樣式
width: .377778rem;
height: .377778rem;
border-radius: 50%;
background-color: #000;
}
.swiper-container>.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-container>.swiper-wrapper>.swiper-slide {
width: 100%;
height: 100%;
}
.swiper-container>.swiper-wrapper>.swiper-slide>img {
width: 100%;
height: 100%;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {//下一頁按鈕
background-image: url(../res_im/arrow_L.png)!important;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {上一頁按鈕
background-image: url(../res_im/arrow_R.png)!important;
}