1. The introduction and swiper.css swiper.js
2. Add code
<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>
<! - If you need to pager ->
<div class="swiper-pagination"></div>
<! - If you need a navigation button ->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
3.css style
.swiper-container {// rotate integrally FIG style
overflow: hidden;
width: 16rem;
height: 8.911111rem;
position: relative;
z-index: 0;
}
.swiper-container> .swiper-pagination {// pagination overall pattern of small dots
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 {// currently selected dots style
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 {// Next button
background-image: url(../res_im/arrow_L.png)!important;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {back button
background-image: url(../res_im/arrow_R.png)!important;
}