CSS修改swiper幻灯片自定义切换剪头特效(背景图、位置、背景色、尺寸)

《CSS修改swiper幻灯片自定义切换剪头特效(背景图、位置、背景色、尺寸)》正文开始，本次阅读大概7分钟。

《zblog模板最好用的幻灯片（轮播、焦点图）特效代码》

之前发布的幻灯片特效，推荐SuperSlide和swiper，今天来分享下老白常用的swiper自定义特效，包括切换大于号小于号，包括幻灯片文字标题：

先看默认状态下的swiper幻灯片特效：

一、改变剪头背景图片：

其中左右切换三角都是使用背景图片制作的，而下方图片则是通过增加CSS去改变背景图片，以及切换圆点特效：

CSS：

/*slider*/
#slider{width:100%;height:350px;margin-top:-15px;margin-bottom:20px;overflow:hidden;}
.swiper-container{width:100%;height:100%;}
.swiper-slide{font-size:18px;background:#fff;position:relative;width:100%;height:100%;}
/*.swiper-pagination{text-align:right;}*/
.swiper-pagination-bullet{background-color:#fafafa;width:12px;height:12px;}
.swiper-pagination-bullet-active{background:#fff;}
.swiper-button-next,.swiper-container-rtl.swiper-button-prev{background-image:url(images/swiper-next.png);}//改变背景图片
.swiper-button-prev,.swiper-container-rtl.swiper-button-next{background-image:url(images/swiper-next.png);transform:rotate(180deg);}//改变背景图片
.swiper-slideimg{width:100%;height:100%;object-fit:cover;}
.swiper-slidep{position:absolute;left:0;right:0;bottom:0;color:#fff;background-color:rgba(0,0,0,.6);
height:50px;line-height:50px;padding-left:3%;padding-right:20%;overflow:hidden;}

背景图片：

二、改变切换背景、尺寸、颜色等：

上图所示，对swiper幻灯片的切换按钮进行了位置调整、尺寸调整、背景图片尺寸、已经背景色设置，下面分享下CSS：

CSS：

注意：.slider2为外盒

.slider2.swiper-button-next,.slider2.swiper-button-prev{width:40px;height:100px;margin-top:-50px;}//重定义切换按钮尺寸和上下居中位置
.slider2.swiper-button-next,.slider2.swiper-container-rtl.swiper-button-prev{background-image:url(images/right.png);background-size:18px22px;background-color:#58bdd2;right:0;opacity:1;}//更换背景图片、尺寸，增加背景颜色，设置透明度，
.slider2.swiper-button-prev,.slider2.swiper-container-rtl.swiper-button-next{background-image:url(images/right.png);transform:rotate(180deg);background-size:18px22px;background-color:#58bdd2;left:0;opacity:1;}//更换背景图片、尺寸，增加背景颜色，设置透明度，
.slider2.swiper-button-next:hover{background-color:#64cdbe;opacity:1;}//触发后变色
.slider2.swiper-button-prev:hover{background-color:#64cdbe;opacity:1;}//触发后变色