Railsで複数の画像をスライド表示させる

7478 ワード
JavaScript Ruby Rails jQuery Ruby テキストリンク

WHY

オリアプで複数の画像をスライド表示させる機能を実装しましたのでアウトプットしていきます。

今回はrailsでjqueryのslickというプラグインを使用して画像をスライド表示させていきます。

準備

画像を貼り付けたりしてビューを整えていきます。

ビューファイル

<div class="background">
  <div class="images">
    <%= image_tag "sample1.jpg" %>
    <%= image_tag "sample2.jpg" %>
    <%= image_tag "sample3.jpg" %>
    <%= image_tag "sample4.jpg" %>
  </div>
</div>

----CSS----
.images{
  width: 50vw;
  height: auto;
}

このようになっています。

それではこの並んでいる画像をスライドで表示していけるようにしていきたいとおもいます。

まずはJqueryを導入します。views/shared/application.html.erbに以下のように記述します。

↓を記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
↓もともとある
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

続いて下に3行追加します。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

最後にjavascript/packs/application.jsの最後に以下の記述をします。

$(function() {
  $('.images').slick({
      dots: true,
  });
});

確認

ブラウザを確認してみましょう

画像が一枚になり、見づらいですが点が４つつきました。ビューをもう少し見えやすくします。

.background{
  background-color: gray;
  width: 40vw;
  height: auto;
  margin: auto;
}
.images{
  width: 30vw;
  height: auto;
  padding: 30px;
  margin: auto;
  background-color: lightblue;
}
.images img{
  width: 50%;
  height: auto;
}

するとこのように矢印が見え、画像をスライドさせることに成功しました。

slickでは多数のオプションやイベントが用意されており、矢印を変更させたり、自動再生をするか否かを設定できたりと自分好みにカスタマイズできます！
詳しくはこちらの記事がわかりやすかったです。
https://webdesignday.jp/inspiration/technique/jquery-js/3847/

今回おそらく初のライブラリを導入しましたが、とても便利さに驚きました！今後もどんどん調べていきたいと思います！