vue如何使用swiper插件修改左右箭头的默认样式
土生土长的IU 人气:0使用swiper插件修改左右箭头的默认样式
效果图
修改箭头的背景,以及颜色
.swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; }
修改箭头的大小
.swiper-button-prev:after, .swiper-button-next:after { font-size: 14px; }
vue中修改swiper样式问题
当你在vue中使用swiper时,你会发现,你直接修改swiper里面的样式,是修改不成功的。
原因
vue文件中的template,和style 都会经过vue-loader的编译。
在style标签上使用了 scoped 属性的话,template中手写的元素和style之间会通过vue-loader生成的一个自定义属性,形成呼应关系,style只对对应的template起作用。
编译过程中由swiper 生成的分页器标签不会经过vue-loader的编译,所以选不到。
解决方法
方法一:样式穿透
<style lang="scss" scoped> ::v-deep .swiper-pagination-bullet { width: 6px; height: 6px; background-color: #FFFFFF; opacity: 1; } ::v-deep .swiper-pagination-bullet-active { width: 14px; height: 6px; border-radius: 3px; opacity: 1; background-color: #FFFFFF; } </style>
方法二:在<style lang="scss" scoped></style>下面再写一个<style></style>不加scoped
<style> .swiper-pagination-bullet { width: 6px; height: 6px; background-color: #FFFFFF; opacity: 1; } .swiper-pagination-bullet-active { width: 14px; height: 6px; border-radius: 3px; opacity: 1; background-color: #FFFFFF; } </style>
修改样式之前:
修改样式之后:
我就是把分页的样式修改了一下。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容