目標
eachメソッドを用いた上で
登録されている画像枚数に応じてスライドショーを実装する。
※※目標に近づいているものの、まだすべてを解消出来たわけではありません。
解消でき次第更新いていきます。
開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina
前提
【Ruby on Rails】refileでの投稿画像プレビュー機能
画像投稿機能ができていればOKです。
bootstrap4に関してはこちらの記事がわかりやすかったです。
Railsアプリで Bootstrap 4 を利用する
公式サイトをチェック
Carousel - Bootstrap 4.1 日本語リファレンス
今回はこの中の
With indicatorsの方法で実装を試みます。
※※結論からいうと、不具合があるため、解消でき次第更新します。
viewの編集
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<% @post_images.drop(1).count.times do |index| %>
<li data-target="#carouselExampleIndicators" data-slide-to="#{index}"></li>
<% end %>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<% @post_images.first(1).each do |image| %>
<%= attachment_image_tag image, :image, class: "carousel_image" %>
<% end %>
</div>
<% @post_images.drop(1).each do |image| %>
<div class="carousel-item">
<%= attachment_image_tag image, :image, class: "carousel_image" %>
</div>
<% end %>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
考え方
公式サイトでは直接画像を記述しているため、今回の目標に近づけるために
一枚目を<div class="carousel-item active">
に指定しています。
したがって、一枚目を<% @post_images.first(1).each do |image| %>で取得し、
2枚目以降をdrop(1)を用いて取得しています。
indicatorの部分は画像の枚数文あれば大丈夫なものの、
こちらもclass="active"が必要なため、
2枚目以降をdrop(1)を用いて取得しています。
不具合
1 indicatorの表示とスライドショーでのindicatorの流れは正しいものの、
indicatorをクリックすると最後の画像から順に選択してしまう
2 .carousel-fadeが適用されない
→(Herokuにデプロイ後、iphoneのsafariでは適用されました。)
まとめ
indicatorとcarousel-fadeを使用しない場合はこの方法で合っていると思いますので、
少しでも参考になれば幸いです。
また、もし改善点などがあれば是非とも教えていただきたいです。
参考
Bootstrap4 Carousel(カルーセル)の使い方とカスタマイズサンプル
RailsでBootstrapのスライドショーPartial