[slick.js]複数のスライドを設置する時の注意

2022.02.24

動かないときあるよ。

同一ページに複数のslick.jsのスライダーを設置して、htmlもjsも内容が間違っていないのに動かない時がある。仕様だと思ったほうがいい感じ。

動かないケース

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function(){
        $('#slider02').slick()
        $('#slider01').slick()
    })
</script>
<div class="slider" id="slider01">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider" id="slider02">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>

html上の並びとjsの並びが合っていなければ動かない。

この場合、「#slider01」は動かずに「#slider02」は動く状態。

動く形

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function(){
        $('#slider01').slick()
        $('#slider02').slick()
    })
</script>
<div class="slider" id="slider01">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider" id="slider02">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function(){
        $('#slider02').slick()
    })
    $(function(){
        $('#slider01').slick()
    })
</script>
<div class="slider" id="slider01">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider" id="slider02">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>

並びを合わせるか、「$(function(){…})」でそれぞれ分けて囲えばOK。

まとめ的なもの

デザインを作って上から組んでいくと自然と並びは合致するので気づかずに上手くいっているケースは多いと思う。トップ画像を後付でスライド化したときとか、決まった部分からコーディングしていくと並びが乱れるので動かないケースが出てくる。だとすればそれぞれを無名関数で囲う癖をつけておけばどんな状況でも動かなくなることはないので、そうした方がいいかもしれない。とはいえあんまり文字数増やしたくない気持ちもある。そうしたいなら整理して書くようにするしかないですね。

20230803追記：応用編

使いまわしばっかりの中にイレギュラーがあった場合。

<div class="slider" id="slider01">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider" id="slider02">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>
<div class="slider">
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
    <div class="slide"><picture><source srcset="https://placehold.jp/1200x1000.png" media="(max-width:767.98px)"><img src="https://placehold.jp/1200x600.png" alt=""></picture></div>
</div>

こうする。

$(function(){
    $('.slider').not('#slider01,#slider02').slick();
    $('#slider01').slick();
    $('#slider02').slick();
})

.not()を含むやつ（汎用）は先に書いても後に書いても大丈夫だった。

スポンサーリンク

コメント

タイトルとURLをコピーしました