slickプラグインのslick-theme.cssについて教えて下さい

rails5.2です。
画像スライダのslickプラグインを初めて導入、以下のように動作確認できました。

css(あるいはscss)は以下の２つありますが、
slick.css
slick-theme.css

このうち、slick-theme.cssを入れると
previousボタン,nextボタンが消えてしまいます。

DL,CDN両方試しても、
読み込み順番を変えてみても同じでした。

slick-theme.cssを入れるとボタンが消えますが、これで正常な動作なのでしょうか？
slick-theme.cssは何のためにあるのでしょう？
両方必要なのでしょうか？

勘違いしていたらご指摘いただけると幸いです。
宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

おぉ、定番スライダーですね。
公式を見ると下記のように記載があるのと、現在の動作状況から、リセット用のCSSみたいですね。

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
コード

公式：https://github.com/kenwheeler/slick

投稿2020/09/27 05:21

no1knows

総合スコア3365

pecchan

2020/09/27 06:27

はい、Flickityはやめてコチラにしました！要領を得ずスミマセン、「リセット用のCSS」とはどういう意味でしょうか？「slick.css」を無効にするcss？それだと「slick.css」は存在する意味ないし・・・。両方のcssを開いて眺めてみましたが、cssはよく分かりません(泣)

no1knows

2020/09/27 06:46

ファイルを見ました。ちょっと認識と異なっていましたので訂正させてください。 slick.cssだけだと最低限でデザインされていないもの。 slick-theme.cssをつかうとslick標準のデザインが適用されるという形でした。そして質問にあるボタンが消えたりするのは必要ファイルが足りていないために起こっているようです。そのため下記の流れで必要ファイルの有無とパスを確認しながら実装するとよいかもしれません。 https://www.tipdip.jp/tips_posts/production/1549/

no1knows

2020/09/27 06:48

ここだと必要ファイルが記載してありました。 https://webdesignday.jp/inspiration/technique/jquery-js/3847/#i-3

pecchan

2020/09/27 13:47

fontsフォルダをcssと同じ場所に置いておかなきゃいけないそうです。 https://travelogue.jp/blog/archives/4757.html ありがとうございました！

no1knows

2020/09/27 14:25

読み込み時に利用するajax-loader.gifの設置もお忘れなく！

pecchan

2020/09/27 23:09

ありがとうございます！