之前發布的幻燈片特效，推薦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-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;}背景圖片：
二、改變切換背景、尺寸、顏色等：
上圖所示，對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;} //觸發后變色