【swiper.js】スライダーの矢印カスタム

2019年11月22日 | Web

jQueryを使わずに設置ができると人気のスライダー【swiper.js】の矢印をFont Awesomeや画像でカスタマイズする案件がありましたので、備忘録を兼ねて記載させて頂きます。

変更前

下のソースは変更前の【swiper.min.css】です。【swiper.min.css】ファイルの130行目あたりのソースです。【swiper.min.css】のソースは圧縮されているので、解凍すると見易くなります。私は、こちらのサイトで解凍しました。CSS解凍サイトは、外部サイトになりますので、自己責任でのご使用お願いします。


.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'
}

fontawesome矢印に変更

【swiper.min.css】を下のように変更します。矢印の変更にはFont Awesomeを使っています。Font Awesomeを利用される場合は、head内にCDNの設置を行ってください。下ソースの@keyframesは、矢印マウスオーバー時に少し動きをつけるために設定しています。


.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
}

画像矢印に変更

画像矢印の場合は、【swiper.min.css】を下のように変更します。


.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
}