【Swiper】横に一定速度で流れ続ける無限ループスライダーの作り方

RELEASE / 2024.5.13 UPDATE / 2024.05.13

JavaScript

Swiper

スライダー

一定速度

WEBサイトを見ていると横方向に一定速度で流れ続けるスライダーを見たことはありませんか？
一見難しそうなスライダーですがスライダープラグインの「Swiper」を使うことで簡単に実装することが出来ます。
この記事では「Swiper」で実装する横に一定速度で流れ続ける無限ループスライダーの作り方をご紹介したいと思います。

この記事の目次を表示

1 横に一定速度で流れ続ける無限ループスライダーの作り方
- 1.1 完成コード
- 1.2 コードの解説
2 逆方向に流れ続ける無限ループスライダー
3 まとめ

横に一定速度で流れ続ける無限ループスライダーの作り方

完成コード

まずはSwiperで実装する横に一定速度で流れ続けるスライダーの完成コードを見てみましょう。

HTMLはこちら。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide -slide1"></div>
        <div class="swiper-slide -slide2"></div>
        <div class="swiper-slide -slide3"></div>
    </div>
</div>

CSSはこちら。

.swiper-slide{
    width: 100%;
    height: 200px;
}
.swiper-slide.-slide1{
    background: #dc5a45;
}
.swiper-slide.-slide2{
    background: #e8c72e;
}
.swiper-slide.-slide3{
    background: #3d8582;
}
.swiper-wrapper {
    transition-timing-function: linear;
}

JavaScriptはこちら。

const swiper = new Swiper('.swiper', {
    loop: true,
    speed: 6000,
    allowTouchMove: false,
    autoplay: {
        delay: 0,
    },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

「Swiper」で横に一定速度で流れ続けるスライダーを作る場合、HTMLのコードは「Swiper」の基本形のままで大丈夫です。

実装のポイントとなるのはCSSとJavaScriptです。

まずはCSSのコードのポイントから。

.swiper-wrapper {
    transition-timing-function: linear;
}

このCSSを指定しないとアニメーションにイージング効果が働き、と一定速度で流れ続けてくれません。

以下がtransition-timing-function: linear;の指定がない場合のサンプルです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

少し不自然なアニメーションですね。一転速度で流れ続けるスライダーを実装する場合は、transition-timing-function: linear;の指定を忘れないようにしましょう。

続いて、JavaScriptのコードです。

const swiper = new Swiper('.swiper', { ... });

「Swiper」のインスタンスを生成します。

そして、横に一定速度で流れ続けるスライダーのオプションをそれぞれご説明します。

loop: true,

loopのデフォルト値はfalseになっています。trueにすることでスライダーが途切れることが無くなります。

speed: 6000,

speedはスライダーが一周する時間を設定します。数値が小さいほど早く、大きくするとゆっくりしたスライダーになります。

allowTouchMove: false,

allowTouchMoveはスワイプによるスライド切り替えを有効にするかの設定です。
デフォルト値はtrueになっていて、スワイプによる移動が出来てしまうのでこの機能を無効化しています。

autoplay: {
    delay: 0,
},

autoplayはスライダーが切り替わるアニメーションが完了してから次のスライダーに切り替わるアニメーションが開始するまでの時間を設定します。
autoplayを0にすることでアニメーションが途切れることが無く、スライダーが移動し続けます。

ここまでの設定で「Swiper」横に一定速度で流れ続ける無限ループスライダーの実装は完成です。

逆方向に流れ続ける無限ループスライダー

先ほどのサンプルとは反対方向に流れ続ける無限ループスライダーの場合はreverseDirectionのオプションtrueにするだけで実装出来ます。

const swiper = new Swiper('.swiper', {
    loop: true,
    speed: 6000,
    allowTouchMove: false,
    autoplay: {
        delay: 0,
        reverseDirection: true,  // 逆方向のスライダーにする
    },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

逆方向のスライダーも簡単に実装出来ますね。