用CSS修改swiper幻灯片，自定义切换效果（背景图、位置、背景色、大小）

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

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

我们先看一下默认状态下的滑动幻灯片效果：

1。更换发型背景图：

/*滑块*/ #滑块{宽度：100%;高度：350像素；顶部边距：-15px；边距底部：20px；溢出：隐藏；} .swiper-container {宽度：100%；高度：100%；} .swiper-slide {字体大小：18px；背景：#fff；位置：相对；宽度：100%；高度：100%；} /*.swiper-pagination{text-align: right;}*/ .swiper-pagination-bullet{背景颜色：#fafafa;宽度：12px;高度：12px;} .swiper-pagination-bullet-active{背景：#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-slide img{宽度：100%；高度：100%；对象适合：覆盖；} .swiper-slide p{位置：绝对；左：0；右：0；底部：0；颜色：#fff；背景颜色：rgba(0,0,0,.6)； 高度：50px；行高：50px；左内边距：3%；右内边距：20%；溢出：隐藏；}

背景图片：

.slider2 .swiper按钮- next, .slider2 .swiper-button-prev{width: 40px;height: 100px;margin-top: -50px;} //重新定义切换按钮尺寸和居中 .slider2 .swiper-button-next,.slider2 .swiper-container-rtl .swiper-button-prev {背景图像：url(images/right.png);背景大小：18px 22px;背景颜色：#58bdd2 ;right: 0;opacity: 1;} //更改背景图片和大小，增加背景颜色，并设置透明度，.slider2 .swiper-button-prev,.slider2 .swiper-container-rtl .swiper-button-next{背景图像: url(images/right.png);变换:旋转(180deg);背景大小:18px 22px ;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;} //触发后改变颜色