jQuery 2024.05.08

【簡単実装！】Slickでarrowsの位置やデザインをカスタマイズする方法

Slickは柔軟なカスタマイズが可能なため、非常によく使われるjQueryプラグインです。
この記事では、Slickのarrowsオプションを使用して、スライダーのarrowsをカスタマイズする方法を段階的に説明します。最終的には、特定の要素にarrowsを追加し、デザインを自由に変更できるようになります。早速始めていきましょう。

1 Slickの基本設定
- 1.1 HTML
- 1.2 slick
  - 1.2.1 動かない場合
2 arrowsの基本的な設定
- 2.1 arrows: trueを設定
3 arrowsのカスタマイズ
- 3.1 prevArrowとnextArrowを設定
4 arrowsの位置を変更
5 デモ
6 まとめ

Slickの基本設定

まず、Slickを使用するためには、jQueryとSlickのスクリプトを追加する必要があります。これらは、公式サイトからダウンロードするか、CDNを利用してください。
slickの導入方法についてはこちらの記事でご紹介していますので、まだslickの導入方法をまず知りたい方は是非ご覧ください。
【Slick / 初心者向け】WordPressにスライダーを導入する方法

HTML

基本的なslickが動く状態になったら、HTMLを準備します。今回は以下のように設定します。

<div class="slider">
    <div class="slick-item"><p>1枚目</p></div>
    <div class="slick-item"><p>2枚目</p></div>
    <div class="slick-item"><p>3枚目</p></div>
    <div class="slick-item"><p>4枚目</p></div>
    <div class="slick-item"><p>5枚目</p></div>
    <div class="slick-item"><p>6枚目</p></div>
    <div class="slick-item"><p>7枚目</p></div>
</div>

slick

次にslickを動かすためのコードを用意します。

$('.slider').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
});

slickが正常に動く環境であればこのコードでひとまずスライダーとして機能します。

動かない場合

すでにご紹介したslickの使い方に関する記事にも書いていますが、動かない場合はjQueryの読み込み順が関係している場合があります。下記コードをお試しください。

jQuery(function ($) {
    $('.slider').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
    });
});

これで動かない場合は環境を確認し直してください。

arrowsの基本的な設定

slickが動くようになったらarrowsの基本的な設定を進めていきましょう。

arrows: trueを設定

Slickで矢印を表示するには、オプションでarrows: trueを設定します。これは、スライダーの左右にデフォルトの矢印が表示されることを意味します。

$('.slider').slick({
    slidesToShow: 5, // スライドを5つ表示
    slidesToScroll: 1, // 一枚ずつ表示切替
    arrows: true // デフォルトの矢印を表示
});

arrowsのカスタマイズ

prevArrowとnextArrowを設定

デフォルトの矢印を使用する代わりに、prevArrowとnextArrowオプションを使ってデザインの柔軟性を高めましょう。
これらのオプションを使うとデフォルトの矢印とは違うclass名をつけることができてslick.cssに影響されない矢印を作成できるため、カスタマイズが簡単になります。

$('.slider').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '<div class="slide-arrow prev-arrow"></div>',
    nextArrow: '<div class="slide-arrow next-arrow"></div>'
});

arrowsの位置を変更

矢印をスライダーの外や特定の位置に配置したい場合、appendArrowsオプションを使用して、矢印が追加される要素を指定します。
以下では例として、arrow_boxクラスを持つ要素内に矢印を追加します。

矢印を追加させるための要素を作成

まずは矢印を置きたい位置にarrow_boxクラスを持つ空の要素を用意しておきましょう。

<div class="slider">
    <div>1枚目</div>
    <div>2枚目</div>
    <div>3枚目</div>
    <div>4枚目</div>
    <div>5枚目</div>
    <div>6枚目</div>
    <div>7枚目</div>
</div>
<div class="arrow_box"></div>

appendArrowsオプションを使用

appendArrowsオプションを使用すると、その指定の要素にarrowsを入れることができます。
jQueryの要領で要素を選択します。

$('.slider').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    arrows: true,
    appendArrows: $('.arrow_box'),
    prevArrow: '<div class="slide-arrow prev-arrow"></div>',
    nextArrow: '<div class="slide-arrow next-arrow"></div>'
});

これで矢印に関連する要素が.arrow_boxに収まったスライダーを作成することができました。

CSSを追加

CSSによっては上記までの段階では要素として表示されない場合もありますので、以下のCSSを試しに追加してみましょう。

.arrow_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px 0 0;
    position: relative;
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 50px;
    height: 50px;
    background: coral;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 20px;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:10px;
    height:10px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}

デモ

スライダーとテキストの下にカスタマイズした矢印が表示されました。スライダーとarrowsの間に他の要素があっても問題ありません。

See the Pen
【初心者向け】slick3枚表示 by GROWORKS (@groworks)
on CodePen.

このデモにはレスポンシブ対応へのコードも記載されているので、コピペでも使いやすいかと思います。

まとめ

これで、Slick Sliderの矢印のカスタマイズについて、基本から応用までを学びました。これらの設定を利用して、さまざまな案件に合わせたスライダーを作成してみてください。

r.s

グローワークスのコーダー兼プログラマー。最適なコードでサイトを動かすことに情熱を注いでいます。技術的課題を解決するのが得意です。

View All