<備忘録>Railsでslickを使って簡単にカルーセルデザイン

こんにちは。

今日はrailsアプリにslickを導入して
スライダーを実装していこうと思います。

環境

• macOS Monterey 12.３.1
• Ruby 3.1.2
• Bundler 2.3.10
• Rails 6.1.4.7

流れ

1.　jQueryインストール
2.　slickの設定
3.　デザイン

1. jQueryインストール

rails6系はjQueryをwebpackを使ってインストール済み。

2.　slickの設定

公式サイト
http://kenwheeler.github.io/slick/

まずslickを導入するためにCDNのコードを
application.html.erbに貼り付けます。
CDNのコードは公式サイトに載っています。

application.html.erb

 //下記2行をhead内に記述
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

好きなスライダーをサイトの「demos」のコードを
html内もしくは
app/javascriptにjsファイルを作って貼り付けます。

例

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

3. デザイン

公式サイトのCDNコードが記載されている上に
「Download now」があるのでクリックすると
slickフォルダーがダウンロードされます。

ダウンロードされた中の
「slick.scss」と「slick-theme.scss」は「app/assets/stylesheets」に、
「slick.min.js」は「app/javascript」に配置します。

「slick.scss」と「slick-theme.scss」を
application.scssに読み込ませます。

application.scss

　//下記2行を追加
  @import "slick-theme";
  @import "slick"; 

あとはcssで見た目を整えれば終了です。

参考