【簡単】slickの矢印カスタマイズ方法【前へ・次へ】

記事内に広告を含みます

パソ君

・slickの矢印のカスタマイズ方法は？

こんな疑問にお答えします。

slickを実装するさい、矢印を有効化にしたらデフォルト状態で実装されますよね。

でも案件によって、矢印のデザインを変えたいはず。

三角形にしたり、画像を用いたりカスタマイズが必要です。

でも大丈夫。実は簡単に実装できちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「slickの矢印カスタマイズ方法」について解説していきます！

この記事でわかること

slickの矢印カスタマイズ方法

2023年1月24日【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】

【簡単】slickの矢印カスタマイズ方法【前へ・次へ】
【簡単】slickの矢印カスタマイズ方法【三角形で作成してみた！】
【簡単】slickの矢印カスタマイズ方法【前へ・次へ】：まとめ

【簡単】slickの矢印カスタマイズ方法【前へ・次へ】

そんな矢印をカスタマイズしたサンプルがこちら↓

See the Pen slick矢印➀ by jito-coder (@jito-coder) on CodePen.

.test-slick button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.test-slick button:focus {
    outline: none;
}

.test-slick button.arrow-common {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    width: 14%;
    padding-top: 6%;
    cursor: pointer;
    z-index: 5;
}

.test-slick button.arrow-prev {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s2.png);
    left: -10%;
}
.test-slick button.arrow-next {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s.png);
    right: -10%;
}

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        arrows: true,
        prevArrow: '<button class="arrow-common arrow-prev"></button>',
        nextArrow: '<button class="arrow-common arrow-next"></button>',
    });
});

コードの重要な点がこちら↓

jQueryで矢印を有効化しタグを変更
CSSで変更したタグに対して装飾
CSSでアウトラインを無効化にしておく

順に見ていきましょう。

➀：jQueryで矢印を有効化しタグを変更

まず矢印を有効化します。下記の3行目ですね↓

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        arrows: true,
        prevArrow: '<button class="arrow-common arrow-prev"></button>',
        nextArrow: '<button class="arrow-common arrow-next"></button>',
    });
});

そして「prevArrow」「nextArrow」に対して、矢印のタグを変更します。

これでデフォルトとは違う矢印を作成することができました。

ちなみに「arrow-common」が共通クラス。
「arrow-prev」「arrow-next」が、前へ・次へのそれぞれのクラスです。

このクラスにCSSを当ててカスタマイズしていきましょう。

ジト

クラス名は任意です！

➁：CSSで変更したタグに対して装飾

先述したクラスに対して、CSSをあてていきます。

共通クラスに対して、上下位置や大きさを指定↓

.test-slick button.arrow-common {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    width: 14%;
    padding-top: 6%;
    cursor: pointer;
    z-index: 5;
}

前へ・次へそれぞれのクラスに対して、背景画像と左右位置を指定↓

.test-slick button.arrow-prev {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s2.png);
    left: -10%;
}
.test-slick button.arrow-next {
    background-image: url(https://jito-site.com/wp-content/uploads/2023/06/arrow_s.png);
    right: -10%;
}

これで矢印を画像で配置することができました。

➂：CSSでアウトラインを無効化にしておく

最後にちょっとおまけです。

このままだと矢印をクリックしたときに、黒い線（アウトライン）がでてしまいます。

それを無効化するために、下記CSSを記述しておきましょう。

.test-slick button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.test-slick button:focus {
    outline: none;
}

【簡単】slickの矢印カスタマイズ方法【三角形で作成してみた！】

最後にborderを使い三角形で矢印をカスタマイズしたサンプルを紹介します。

それがこちら↓

See the Pen slick矢印➁ by jito-coder (@jito-coder) on CodePen.

.test-slick button.arrow-common {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 5;
}

.test-slick button.arrow-prev {
    left: -10%;
    border-width: 25px 25px 25px 0;
    border-color: transparent #000066 transparent transparent;
}
.test-slick button.arrow-next {
    right: -10%;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #000066;
}