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实现点击时间获取时间段查询功能
这篇文章主要为大家详细介绍了Vue实现点击时间获取时间段查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-04-04
Vue 页面监听用户预览时间功能的实现代码
这篇文章主要介绍了Vue 页面如何监听用户预览时间,首先需要借助vue页面的生命周期函数mounted和destroyed，分别加入开始计时和清除计时的逻辑，通过相关操作实现此功能，需要的朋友可以参考下
2021-07-07
vue基础知识--axios合并请求和slot
这篇文章主要介绍了vue中的axios和slot，文中代码非常详细，对大家的工作学习有所帮助，感兴趣的朋友可以参考下
2020-06-06
vite2打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
mint-ui 时间插件使用及获取选择值的方法
下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue3 elementUI如何修改el-date-picker默认时间
这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue中的methods、watch、computed的区别
这篇文章主要介绍了Vue中的methods、watch、computed的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue+epubjs实现电子书阅读器的基本功能
这篇文章主要为大家详细介绍了如何使用vue+epubjs实现电子书阅读器的基本功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-11-11
Vue3如何在setup中获取元素引用(ref)
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue 前端实现登陆拦截及axios 拦截器的使用
这篇文章主要介绍了Vue 前端实现登陆拦截及axios 拦截器的使用,通过这个项目学习如何实现一个前端项目中所需要的登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。需要的朋友可以参考下
2019-07-07