6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Ruby on Rails】bootstrap4のcarouselをeachメソッドを使いスライドショーを実装

Last updated at Posted at 2020-10-04

目標

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の編集

app/views/
<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

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?