[swiper.js]延々流れ続けるスライダー作成時のメモ

ポイントが色々ある。

前提
サンプル
注意点
1. slidesPerViewは整数を入れる
2. 一定速度で動かすのはCSS管理

前提

最新バージョンが9だったんでそれでやってる。

サンプル

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <script type="module">
        import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.esm.browser.min.js';
        const swiperSample = new Swiper('#swiper_sample', {
            loop: true,
            breakpointsBase: 'container',
            slidesPerView: 2,
            speed: 3000,
            allowTouchMove: false,
            autoplay:{
                delay: 0,
                disableOnInteraction: true,
                pauseOnMouseEnter: false,
            },
            breakpoints: {
                420: { slidesPerView: 2, },
                768: { slidesPerView: 4, },
                1024: { slidesPerView: 5, },
                1200: { slidesPerView: 6, },
            }
        });
    </script>

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

これだけの話。参考記事は腐るほどある。

【Swiper】横方向に流れ続ける無限ループスライダーを作る方法

スライダー系プラグインSwiperで横方向に流れ続ける無限ループスライダーの作り方をコードとデモを使って解説します。またオプションを使えば逆方向にすることも可能です。コードとデモからコピペして簡単に実

【Swiper】インフィニットスライドを作成する方法

本記事では、Swiperでインフィニットスライドを作成する方法をご紹介しています。インフィニットスライドには有名なライブラリが存在しますが、ここではSwiperを使ってインフィニットスライドを作成して

注意点

slidesPerViewは整数を入れる

「4.5」とか小数点を入れるとAmazonのやつみたいに端っこにちょい見せさせることができる。普通にやる分には問題ないんだけど、今回みたいな状態だと1回分動いた後に止まってしまう。

どうせ動いてるんだからきっちりハマるのは一瞬だから気にすんなよ、というのがあれで、実際のところ、「やっぱずっと動かしたいわ」ってなったときに引っかかりやすい。注意。

一定速度で動かすのはCSS管理

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

絶対これを忘れないこと。option側での切り替えはないみたい。