解决swiper8轮播插件无法修改左右切换按钮样式问题

2023-07-28 阅读：2022 类型：前端分类：轮播插件标签：轮播插件 style html

一、前言：在使用最新版的swiper插件siwper版本8的时候，发现使用swiper3和swiper4的时候，怎么设置左右轮播按钮样式都不生效。

按照官网文档所说的，给左右按钮加颜色class，结果都没效果：

二、方法：后面找到一种方法，因为swiper5以后开始的版本的都改成字体背景的形式了，以旧版的直接加样式class是不起作用的，需要设置font字体样式即可，如下：

设置左右轮播点按钮宽度和高度、以及设置左右按钮箭头颜色

#homeBanner-button-next{ width: 45px; height: 55px; right: 0px; background-color: rgba(0,0,0,0.2); color: #fff; }
#homeBanner-button-prev{width: 45px; height: 55px; left: 0px; background-color: rgba(0,0,0,0.2); color: #fff;}
//去除按钮点击后后边框问题
.swiper-button-prev:focus, .swiper-button-next:focus{outline:none;}
#swiper-button-prev:hover,#swiper-button-next:hover{ background-color: rgba(0,0,0,0.5); }
//设置左右按钮箭头文字大小
.swiper .swiper-button-prev:after, .swiper .swiper-button-next:after {
  font-size: 25px;
}

三、完整案例：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<style>
.swiper .swiper-button-prev:after, .swiper .swiper-button-next:after {
  font-size: 25px;
}
</style>
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
</script>