jQueryを使わずに設置ができると人気のスライダー【swiper.js】の矢印をFont Awesomeや画像でカスタマイズする案件がありましたので、備忘録を兼ねて記載させて頂きます。
下のソースは変更前の【swiper.min.css】です。【swiper.min.css】ファイルの130行目あたりのソースです。【swiper.min.css】のソースは圧縮されているので、解凍すると見易くなります。私は、こちらのサイトで解凍しました。CSS解凍サイトは、外部サイトになりますので、自己責任でのご使用お願いします。
[html]
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(–swiper-navigation-size) / 44 * 27);
height: var(–swiper-navigation-size);
margin-top: calc(-1 * var(–swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(–swiper-navigation-color, var(–swiper-theme-color))
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(–swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
content: ‘prev’
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
content: ‘next’
}
[/html]
【swiper.min.css】を下のように変更します。矢印の変更にはFont Awesomeを使っています。Font Awesomeを利用される場合は、head内にCDNの設置を行ってください。下ソースの@keyframesは、矢印マウスオーバー時に少し動きをつけるために設定しています。
[html]
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 10;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev::before {
position: relative;
content: "\f104";
font-family: FontAwesome;
background: rgba(255,255,255,0.5);
padding: 8px 12px;
opacity: 1;
border: 1px solid #111;
}
.swiper-button-next::before {
position: relative;
content: "\f105";
font-family: FontAwesome;
background: rgba(255,255,255,0.5);
padding: 8px 12px;
opacity: 1;
border: 1px solid #111;
}
.swiper-button-prev:hover:before{
animation: arrow_prev .5s ease-out forwards;
}
@keyframes arrow_prev {
0% {
right: 0px;
}
50% {
right: 5px;
}
100% {
right: 0;
}
}
.swiper-button-next:hover:before{
animation: arrow_next .5s ease-out forwards;
}
@keyframes arrow_next {
0% {
left: 0px;
}
50% {
left: 5px;
}
100% {
left: 0;
}
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 20px;
right: auto
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 20px;
left: auto
}
[/html]
画像矢印の場合は、【swiper.min.css】を下のように変更します。
[html]
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: 50%;
width: 35px;
height: 35px;
margin-top: -16px;
z-index: 10;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev {
background: url(../images/arrow01.png) no-repeat center center / contain;
}
.swiper-button-next {
background: url(../images/arrow02.png) no-repeat center center / contain;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
left: 20px;
right: auto
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
right: 20px;
left: auto
}
[/html]
swiperスライダーは、jQueryに依存しない、レスポンシブ対応、パターンの多さなどから人気の理由がわかります。今後、swiperスライダーが使われているウェブサイトを多く見かけるようになりそうです。
【swiper.js】にサムネイルを表示させ、更に両サイドが少しづつ見えるカルーセルにカスタムする記事を掲載しました。閲覧いただけると幸いです。
【slick.js】スライダーの矢印変更についての記事も記載しておりますので、あわせてお読みいただけると幸いです。こちらの記事は、【slick.js】スライダーをカルーセルにし、両サイドの画像を透過させ、画像上の矢印をカスタマイズする内容の記事となっております。