swiper.js实现轮播图效果

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;

}

转载于:https://www.cnblogs.com/wx2019/p/11268071.html