【解説】slickで無限ループスライダーの作成方法【逆方向あり】

記事内に広告を含みます

パソ君

・slickで無限ループスライダーはどうやって実装するの？

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

スライダーが無限ループで表示されているサイト見たりしますよね。

下記みたいなやつ↓

これ実はslickを使えば簡単に実装できちゃいます。

ジト

すぐにできるよ

ちなみに逆方向にループさせることも可能なんですよね。

ということで、この記事では「slickで無限ループスライダーの作成方法」について解説していきます！

この記事でわかること

・slickで無限ループスライダーの作成方法
・slickで無限ループスライダーの作成方法【逆方向編】

slickの使い方については下記を参考に。

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

【解説】slickで無限ループスライダーの作成方法【コピペOK】
- slickのオプションを利用するだけ
【解説】slickで無限ループスライダーの作成方法【逆方向編】
- ➀：HTMLに「dir=”rtl”」を記述
- ➁：slickのオプションに「rtl: true,」を追加
【解説】slickで無限ループスライダーの作成方法【左右別方向ありサンプル】
【解説】slickで無限ループスライダーの作成方法【逆方向あり】：まとめ

【解説】slickで無限ループスライダーの作成方法【コピペOK】

slickを用いた無限ループスライダーのサンプルがこちらになります↓

See the Pen ➀slick01 by jito-coder (@jito-coder) on CodePen.

一時停止せずに、無限に画像がスライドショーで流れていきますよね。

<div class="test-slick">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

.test-slick__item {
    margin-right: 5px;
    margin-left: 5px;
}

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 5000,
        cssEase: 'linear',
        slidesToShow: 3,
        swipe: false,
        pauseOnFocus: false, 
        pauseOnHover: false,
        arrows: false,
    });
});

slickのオプションを利用するだけ

slickで無限ループスライダーを作成する方法は、結論から言うとオプションを利用するだけでOK。

先ほどのjsを詳しく見るとこうなります↓

$(function () {
    $(".test-slick").slick({
        // 自動再生オン
        autoplay: true,
        // 画像切り替え間隔０秒
        autoplaySpeed: 0,
        // スライド速度５秒
        speed: 5000,
        // 画像切り替えの動き 一定速度
        cssEase: 'linear',
        // 表示画像枚数 ３枚
        slidesToShow: 3,
        // スワイプ不可
        swipe: false,
        // フォーカス当てた時の一時停止不可
        pauseOnFocus: false, 
        // ホバーした時の一時停止不可
        pauseOnHover: false,
        // 矢印なしに
        arrows: false,
    });
});

簡単に説明すると「０秒の切り替え間隔で、５秒間かけて、表示画像３枚を一定速度で自動再生する」という感じですね。

無限ループスライダーにて、ほぼ確実に必要なオプションが下記になります。

autoplay: true,
autoplaySpeed: 0,
cssEase: ‘linear’,

あとは秒数などを案件ごとに変えていけばOK。

オプションをいじるだけで無限ループスライダーの実装は簡単にできちゃいます。

【解説】slickで無限ループスライダーの作成方法【逆方向編】

無限ループスライダーといっても、案件によっては逆方向に流したい場合がありますよね。

それも実は実装可能。
サンプルがこちらです↓

See the Pen slick無限ループ by jito-coder (@jito-coder) on CodePen.

先ほどと違って左⇒右に向かって無限ループしていますよね。

コードが下記になります。

<div class="test-slick" dir="rtl">
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
    <div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>

$(function () {
    $(".test-slick").slick({
        autoplay: true,
        autoplaySpeed: 0,
        speed: 5000,
        cssEase: 'linear',
        slidesToShow: 3,
        swipe: false,
        pauseOnFocus: false, 
        pauseOnHover: false,
        arrows: false,
        rtl: true,
    });
});

やり方としては下記をするだけ。

HTMLに「dir=”rtl”」を記述
slickのオプションに「rtl: true,」を追加

順に見ていきましょう。

➀：HTMLに「dir=”rtl”」を記述

まずHTMLに「dir=”rtl”」を記述していきます。

スライドさせている親要素タグに対して、下記のように記述しましょう。

<div class="test-slick" dir="rtl">
    <!-- ここにスライドする要素が入ります -->
</div>

➁：slickのオプションに「rtl: true,」を追加

あとはslickのオプションに「rtl: true,」を追加するのみ。

$(function () {
    $(".test-slick").slick({
        // ~~
        rtl: true,
    });
});

これだけで逆向きのスライダーを実装できます。

ちゃんとHTML、js両方にrtlの記述をするように注意しましょう。

【解説】slickで無限ループスライダーの作成方法【左右別方向ありサンプル】

最後に「右⇒左」と「左⇒右」に流れているループスライダーが並んでいるサンプルを紹介します！

それがこちら。

See the Pen slick無限ループ➁ by jito-coder (@jito-coder) on CodePen.

こういうのが実装されてるサイトたまにみますよね！今回紹介した方法を使えば、簡単に実装可能です！

2023年6月19日【解説】slickのオプション一覧【カスタマイズまとめ】