Slick スライダーって便利ですよね。使い勝手良くて、無条件に採用している気がします。
そんなSlick スライダーですが、たった１つのトラップでハマりにハマったので、ノウハウをシェアします。
コードはこんな感じ 
シンプル。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<div class="slick-slider slider">
<div><img src="https://placehold.jp/aaffaa/ffffff/600x350.png?text=画像A" alt=""></div>
<div><img src="https://placehold.jp/ffaaaa/ffffff/600x350.png?text=画像B" alt=""></div>
<div><img src="https://placehold.jp/aaaaff/ffffff/600x350.png?text=画像C" alt=""></div>
<div><img src="https://placehold.jp/ffaaff/ffffff/600x350.png?text=画像D" alt=""></div>
<div><img src="https://placehold.jp/aaaaaa/ffffff/600x350.png?text=画像E" alt=""></div>
</div>
<script src="//code.jquery.com/jquery-3.7.1.slim.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 2000,
arrows: false,
});
});
</script>
これなら問題なく動くんです。これならね。
動かないのはこのパターン
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<div style="display:grid;">
<div class="slick-slider slider">
<div><img src="https://placehold.jp/aaffaa/ffffff/600x350.png?text=画像A" alt=""></div>
<div><img src="https://placehold.jp/ffaaaa/ffffff/600x350.png?text=画像B" alt=""></div>
<div><img src="https://placehold.jp/aaaaff/ffffff/600x350.png?text=画像C" alt=""></div>
<div><img src="https://placehold.jp/ffaaff/ffffff/600x350.png?text=画像D" alt=""></div>
<div><img src="https://placehold.jp/aaaaaa/ffffff/600x350.png?text=画像E" alt=""></div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.7.1.slim.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 2000,
arrows: false,
});
});
</script>
display: grid の要素内に入れたら、動きません。
嘘みたいですが、むっちゃ階層深く入れてもダメです。
<div style="display:grid;">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
<div class="slick-slider slider">
<div><img src="https://placehold.jp/aaffaa/ffffff/600x350.png?text=画像A" alt=""></div>
<div><img src="https://placehold.jp/ffaaaa/ffffff/600x350.png?text=画像B" alt=""></div>
<div><img src="https://placehold.jp/aaaaff/ffffff/600x350.png?text=画像C" alt=""></div>
<div><img src="https://placehold.jp/ffaaff/ffffff/600x350.png?text=画像D" alt=""></div>
<div><img src="https://placehold.jp/aaaaaa/ffffff/600x350.png?text=画像E" alt=""></div>
</div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>grid ってそういう子でしたっけ？？？
というわけで、解決策
<style>
.grid {
display: grid;
}
.slick-slider {
width: 100vw;
}
</style>幅指定してあげたら、動くようになりました。 max-width: 100vw でもOKです。
ちなみに width: 100% だと動きません。同じことですからね。考えたらわかります。
２つ目のトラップでもハマってた件。。。
２つもトラップあったら分かりませんって。ほぼ１日使ったよ？
何がやりたかったかというと、
１つのスライドの画像が 300vw くらいあって、それを延々スライドさせたかったんです。
CSS のアニメーションでいいじゃん。
分かります。今なら、僕もそう思います。でもなぜかSlick スライダーで実装しようとしてたんですよね。。。
slidesToShow: 0.3 とかしてみたんですけど、動かないんですよね。
整数しか受け入れてないっぽい。
<script>
$(document).ready(function(){
$('.slider').slick({
infinite: true,
slidesToShow: 0.3,
slidesToScroll: 0.3,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 2000,
arrows: false,
});
});
</script>で、解決策です。
<!-- <script src="//code.jquery.com/jquery-3.7.1.slim.js"></script> -->
<script src="//code.jquery.com/jquery-3.4.1.slim.js"></script>jQuery Var. 3.4.1 !!
原因とか細かいことは分かりません。でも、これで動きます。バグかな？
きっと非推奨だと思います。ええ。
ういーーーーーん
後日談（8/13）
やはり、上記では納得いかず。
.loop-anime {
animation: loop 80s linear infinite;
}
@keyframes loop {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}と変更したのでした。。。
無駄にJavaScriptに拘らず、CSSで良いところは、CSSでいいじゃんって話でしたとさ。