How can I implement a carousel or several photos in a show-page (Ruby on Rails)

Question

I have an index-page showing all my products (first a title, then one photo, then some text). When clicking on one of the products the user gets to my show page showing more text, one map and the one photo from before. Now I would like to add more photos or a carousel, but am not sure, how to do that. Probably first I would have to add some t.strings to schema - but can I do that for a carousel? Where will I then place the code for the carousel - into the show-page? Or if I would add 10 more photos to the one photo, would I have to add a t.string in schema for each of them? I already tried to insert more than one photo by editing the page it does not work. Or can I somehow have kind of a t.array in schema? Here is my code:

                    INDEX.html.erb
<div class="main-content">

<div class="row" id="uebersicht"> 

    
<p id="notice"><%= notice %></p>

<!--% cache product do %-->

    <% @products.each do |product| %>

<div class="Spaltendefinition">	
 <div class="col-xs-12 col-md-6 col-lg-4">
     <div class="gehoertzusammen">
         <div class="name">
       <h3> <%= product.name %> </h3>
       </div>#
       
       <div class="foto">
      <%= image_tag(product.image_url, class: 'img-responsive picturebox') %>
      </div>
<!-- generates the HTML tag: -->
<!--a href="/products/3>Show Product</a-->
        
       <div class="descriptionbox"> 
         <p><%= product.description %></p>
       </div>

        <p> Highlights: <%= product.highlights %> </p>
    </div>
        <p> <%= link_to 'Einzelheiten', product, class: 'btn btn-default' %> | <%= link_to 'Bearbeiten', edit_product_path(product), class: 'btn btn-default' %></p>
        <br>
        
       </div>

      
      <br>
 <% end %>
 
 <div class="neuesprodukt">
<%= link_to 'Neues Produkt', new_product_path, class: 'btn btn-default' %>
</div>
  </div> <!-- /col -->
 </div> 
</div>



              SHOW.html.erb
<div class="Einzelreiseseite">
<div class="row">
<p id="notice"><%= notice %></p>

 <div class="col-sm-6 col-md-4">
<p>
  <strong> <%= @product.name %> </strong>
</p>

<p>
  <strong>Kurzbeschreibung:</strong>
  <%= @product.description %>
</p>

<p>
  <strong>Highlights:</strong>
  <%= @product.highlights %>
</p>

<p>
  <strong>Details:</strong>
  <%= @product.details %>
</p>

</div>

 <p> <%= image_tag( @product.map_url, class: "img-responsive map") %> </p>

<p><%= image_tag( @product.image_url, class: "img-responsive img-zoom1", data_zoom_image: "@product.image_url") %> </p>

<!--img src="../assets/afrika2.jpg"> <img src="../assets/afrika1.jpg"-->

<%= link_to 'Bearbeiten', edit_product_path(@product), class: "btn btn-default" %> |
<%= link_to 'Zurück', products_path, class: "btn btn-default" %>
</div>
</div>


 SCHEMA
ActiveRecord::Schema.define(version: 20180309123443) do

  create_table "products", force: :cascade do |t|
    t.string   "name"
    t.string   "image_url"
    t.text     "description"
    t.text     "highlights"
    t.text     "details"
    t.string   "map_url"
    t.datetime "created_at",  null: false
    t.datetime "updated_at",  null: false
  end

end

Do you need any more details? Thanks in advance! Jutta

Answer 1

There's a great gem called slick for implementing carousels with rails. This is all you have to do:

gemfile

gem 'jquery-slick-rails'

application.js

//= require jquery.slick

view

<section class="slider-wrapper">
  <div class="container slider">
    <% Product.each do |slide| %>
      <!-- content -->
      </div>
    <% end %>
  </div>  
</section>

<script type="text/javascript">
  $(".container").slick({
    dots: true,
    accessibility: true,
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
  });
</script>

There are many possible configurations in the jquery, this is only one example.