CSS修改swiper幻灯片 - 状态圆点变长条修改_网页特效

资料来源：网络整理时间：2023/3/4 1:04:47 共计：3626 浏览

在之前发布过关于swiper的文章《swiper幻灯片自定义切换三角特效》主要分享的是切换按钮的特效CSS，本文来介绍下swiper幻灯片插件的状态圆点样式改变！

因为swiper幻灯插件都有默认的CSS，所以要添加CSS的时候是覆盖添加，添加的一定要显示在swiper自带CSS的下方方可生效！

swiper默认的状态圆点状态图：

要最终实现的效果如下：

只需要改变和覆盖CSS样式即可：

使用google chrome右键检查，获知.swiper-pagination-bullet

修改CSS：

.slider .swiper-pagination-bullet{background-color: #64cdbe;width: 45px;height: 5px;border-radius: 0;opacity: 1;}

.slider .swiper-pagination-bullet-active{background: #fff;}

对宽和高进行命名，恢复圆角为0，透明度也改回1，加上背景色，即可完成样式改变！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：css隐藏文字的5个方法_CSS学习 | ·下一条：CSS 中间文字、两侧居中横线（使用伪类before，after）_CSS学习