Отображение нескольких изображений в карусели Bootstrap

Question

Я начинаю тестировать бутстрап. Пока все идет хорошо, единственная проблема, с которой я сталкиваюсь, заключается в том, что когда я хочу показывать изображения в модальном окне с карусели, всегда появляется одно и то же изображение (первое изображение).

Идея приложения заключается в том, чтобы показать разные продукты с их изображениями, а когда пользователь нажимает на продукт, это модальное окно открывается и показывает все фотографии продукта. Проблема в том, что модальное окно всегда выглядит одинаково, всегда показывает первое изображение первого продукта, но выбираются разные продукты.

Продукт имеет много изображений.

product.rb

class Product < ActiveRecord::Base 
    has_many :images 
    accepts_nested_attributes_for :images, allow_destroy: true 
end 

image.rb

class Image < ActiveRecord::Base 
    belongs_to :product 
end 

products_controller.rb

class ProductsController < ApplicationController 
    before_action :set_product, only: [:show, :edit, :update, :destroy] 

    # GET /products 
    # GET /products.json 
    def index 

    @products = Product.by_tipo_and_price(params[:tipo], params[:min], params[:max]).paginate(:page => params[:page], :per_page => 9) 
    end 
end 

index.html.erb

<%- model_class = Product -%> 

<div class="page-header"> 
    <h1>Productos</h1> 
</div> 

<div class= "row"> 
    <% @products.each do |product| %> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"> 

     <!-- Button trigger modal --> 
     <% if product.images.empty? %> 
      <img data-src="holder.js/160x120" alt="" src="" style="min-height:200px;height:200px;" data-toggle="modal" data-target="#myModal"> 
     <% else %> 
      <img data-src="holder.js/160x120" alt="" src="<%= product.images.first.link %>" style="min-height:200px;height:200px;" data-toggle="modal" data-target="#myModal"> 
     <% end %> 

     <div class="caption" style="min-height:200px;height:200px;"> 
      <h3><%= product.name %></h3> 
      <p>ARS $ <%= product.price %></p> 
      <p> 
      <a class="btn btn-primary" role="button">Añadir al carrito</a> 
      <a role="button"><%= link_to "Modificar", edit_product_path(product), class: "btn btn-primary" %></a> 

      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
       <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-body"> 

        <!-- CAROUSEL --> 
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 

         <!-- Indicators --> 
         <ol class="carousel-indicators"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         </ol> 

         <!-- Wrapper for slides --> 
         <div class="carousel-inner" role="listbox"> 
         <% product.images.each do |i| %> 
          <div class="item active"> 
          <img src="<%= i.link %>" alt="..."> 
          <div class="carousel-caption"> 
           <%= product.id %> 
          </div> 
          </div> 
         <% end %> 
         </div> 

         <!-- Controls --> 
         <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
         <span class="sr-only">Previous</span> 
         </a> 
         <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
         <span class="sr-only">Next</span> 
         </a> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </p> 
     </div> 
     </div> 
    </div> 
    <% end %> 
</div> 

<%= will_paginate %> 

<!-- Modal --> 
<%= link_to t('.new', :default => t("helpers.links.new")), 
    new_product_path, 
    :class => 'btn btn-primary' %> 

Answer 1

Решенные.

<img data-src="holder.js/160x120" alt="" src="<%= product.images.first.link %>" style="min-height:200px;height:200px;" data-toggle="modal" data-target="#<%= product.id %>"> 


<div class="modal fade" id="<%= product.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">