🦁

【JS】splideのスライダーで自動スクロール表示

2024/06/18に公開

普段CSSで実装している自動スクロールを、splideを使ってやってみました。

splideとは？

https://ja.splidejs.com/
アクセシビリティに配慮した軽量・高機能スライダー！
日本人が開発しているので公式ドキュメントが日本語で読みやすいです。
いろんなオプションもあって便利！

今回はCDNを使用しました。

文字が流れる実装が可愛かったのでやってみたのですが、最初うまくいかず...

.splide__slide {
  font-size: 50px;
}

ブロック要素だから広がってしまってました。そりゃそうか、、、

.splide__slide {
　　　　width: fit-content;
  font-size: 50px;
}

を追記したけど変わらず...確認してみると計算された値が反映されていました。
仕方ないから

.splide__slide {
　　　　width: fit-content!important;
  font-size: 50px;
}

これで大丈夫！と思ったら、文字が1回目流れ終わるころに2回目の文字が現れるという謎の仕様に、、、
確認してみると、計算がうまく行っていないみたい。
最初に実装したスライダーと見比べたところ、文字のスライダーには

 fixedWidth: "200px", // スライドのwidth200px

この記述がない。そこでsplideのオプションのfixedWidthで横幅の指定してみるとうまく行きました！

fixedWidthを指定しないとスライダーの計算がうまくいかないみたいです。
CSSで指定するのではなくsplideのオプションでfixedWidthで指定するのがポイント！
他のスタイルも、オプションで指定できるものはオプションで指定しましょう！