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

老白 1个月前 117浏览 0评论

zblog模板最好用的幻灯片(轮播、焦点图)特效代码

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

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

一、改变剪头背景图片

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

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

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

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-slide img{width: 100%;height: 100%;object-fit: cover;}

.swiper-slide p{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;}

背景图片:

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

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

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

上图所示,对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:18px 22px;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: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;} //触发后变色

评论