修改swiper框架轮播图⼩圆点的样式html代码
<!--轮播图-->
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="#"><img src="image/banner_index1.png" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="image/banner_index1.png" alt=""></a></li>
<li class="swiper-slide"><a href="#"><img src="image/banner_index1.png" alt=""></a></li>
</ul>
<ul  class="swiper-pagination">
</ul>
</div>
<script src="lib/swiper/js/swiper.jquery.min.js"></script>
<script>
$(function () {
new Swiper('.swiper-container', {
// 如果需要分页器
pagination: '.swiper-pagination',
autoplay: 1000,//可选选项，⾃动滑动
//设置⽆缝循环
loop:true,
//⽤户操作后, autoplay会默认停⽌, 这个是取消禁⽌autoplay
autoplayDisableOnInteraction: false,
/
/设置切换效果
// effect:'coverflow'
})
})
</script>
修改的css样式
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
width: 0.4rem;
height: 0.3rem;
border-radius: 50%;
}
.
js实现轮播图最简代码swiper-pagination-bullet-active {
background: rgb(235,111,111);
width: .8rem !important;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。