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

2023-07-28   阅读:1038   分类:前端    标签: 轮播插件

一、前言:在使用最新版的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>
【腾讯云】2核2G云服务器新老同享99元/年续费同价,8888元代金券限时抢

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/996.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×