vue如何使用swiper插件修改左右箭头的默认样式
更新时间：2023年01月14日 11:05:33 作者：土生土长的IU
这篇文章主要介绍了vue如何使用swiper插件修改左右箭头的默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用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>修改样式之前：
修改样式之后：
我就是把分页的样式修改了一下。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
由于添加门店时，需要选择门店的省、市、区、详细地址、以及门店的经纬度信息，本文给大家分享Vue集成百度地图实现位置选择功能，感兴趣的朋友一起看看吧2022-06-06
本篇文章主要介绍了vue.js国际化 vue-i18n插件的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍了vue3整合springboot打完整jar包,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-09-09
Vue 读取HTMLCollection列表的length为0问题
这篇文章主要介绍了Vue 读取HTMLCollection列表的length为0问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料，需要的朋友们可以参考借鉴，需要的朋友们下面来一起学习学习吧。2017-12-12
Vue中ref、computed与reactive使用频率现象分析(示例详解)
这篇文章主要分析了Vue中的ref、computed和reactive三个响应式API的使用频率和优势,ref适合处理简单数据类型的响应式需求,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了vue $nextTick实现原理深入详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
解决element-ui的el-select选择器的@blur事件失效的坑
这篇文章主要介绍了解决element-ui的el-select选择器的@blur事件失效的坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了vue router权限管理实现不同角色显示不同路由，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论