CSS修改swiper幻灯片 - 状态圆点变长条修改

老白 2个月前 140浏览 0评论

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

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

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

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

要最终实现的效果如下:

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

只需要改变和覆盖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,加上背景色,即可完成样式改变!

发表评论