【Splide】Auto Scrollエクステンションを使ったらスライドが消えたり点滅したりする場合の対策

やりたかったこと

SplideのAuto Scrollエクステンション で自動スクロールを実装しつつ、splide_slide要素の数が少ないときはSplideの自動発火を切る実装です。

デモはこちら

ダメになったときの動作

動作としては以下のいずれかです。

• Splideは発火しているが、スライドが表示されない
• スライドは表示されるが高速で点滅する

より詳しく言うと .splide_list の要素につく、動き続けるはずのtranslateXが変な小数点の数値になります。

例）style="transform: translateX(-5.36875e+07px);"

デモはこちら

ダメだったコード

HTML

    <div class="splide js-splide c-infinite-scroll" role="group">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <img src="https://placehold.jp/50x40.png" alt="">
                </li>
                <li class="splide__slide">
                    <img src="https://placehold.jp/100x40.png" alt="">
                </li>
                <li class="splide__slide">
                    <img src="https://placehold.jp/180x40.png" alt="">
                </li>
            </ul>
        </div>
    </div>

CSS

splideの発火を止めたときも、起動中と同じ見た目がよいのでこんな感じにしてましたがこれがダメでした。

.c-infinite-scroll ul{
    display: flex;
    justify-content: center;
}
.c-infinite-scroll ul li{
    margin: 0.5rem;
}

JS

<script src="splide.min.js"></script>
<script src="splide-extension-auto-scroll.min.js"></script>
<script>
    // やり方
    //https://ja.splidejs.com/extensions/auto-scroll/
    let splides = document.querySelectorAll(".js-splide");

    if (splides.length) {
        splides.forEach(function (item) {
            let slideItems = item.querySelectorAll(".splide__slide");
            let cloneAmount = 5;
            if(slideItems.length < 6){
                //スライド枚数が少ないときcloneを増やす
                cloneAmount = 10;
            }
            let options = {
                type: 'loop',
                drag: false,
                focus: 'center',
                autoWidth: true,
                pagination: false,
                arrows: false,
                clones:cloneAmount,
                gap:"1rem",
                autoScroll: {
                    speed: 2,
                    rewind: false,
                    pauseOnHover: false,
                    pauseOnFocus: false,
                },
                breakpoints:{
                    768: {
                        //スマホの時 clone数減らす
                        clones: cloneAmount-2
                    }
                }
            }

            if (window.matchMedia( "(max-width: 768px)" ).matches) {
                //スマホのサイズでページを開いたときは2枚以上で発火
                if (slideItems.length > 1) {
                    new Splide(item, options).mount(window.splide.Extensions);
                } else {
                    item.classList.remove("splide")
                }
            }else{
                //PCのサイズでページを開いたときは3枚以上で発火
                if (slideItems.length > 2) {
                    new Splide(item,options).mount(window.splide.Extensions);
                } else {
                    item.classList.remove("splide")
                }
            }
        })
    }
</script>

AutoScrollする splide__list に justify-contentを書くな

これが原因

.splide__listにあたる部分にCSSで justify-content: center; を書いていたのが原因でした。

.c-infinite-scroll ul{
    display: flex;
    justify-content: center;/*これが原因！*/
}

とくに、Splideのオプションに type: 'loop' を使っている時には .splide__list に justify-content: center; があるとまずいようです。

対策

今回は、splide_slideの枚数が少ないとき、Splideを発火させずに .splideのクラスを外してるので :not(.splide)のときだけCSSを当てるようにすれば解決です！

.c-infinite-scroll:not(.splide) ul{
    display: flex;
    justify-content: center;
}
.c-infinite-scroll:not(.splide) ul li{
    margin: 0.5rem;
}

.splide__listに限らず、.splide__slideにCSSを当てたときも要素の位置計算が狂ってしまうことがあります。
できるだけ .splide__ほにゃららの要素にはCSSを当てないほうが安全なようです。

Splideのスライド位置計算関連がおかしいときは、.splide__ほにゃららに位置や幅や余白に関係するCSSが当たっていないか、消したら正常に動作しないか確認してみてください！