Bootstrap Carousel in Rails App, zeigt alle Bilder und keine Thumbnails. Anzeigen von Bildern aus der Datenbank in Carousel

Question

Ich bin ein hinzufügen dieses https://bootsnipp.com/snippets/55Z0v Bootstrap Karussell zu einer Schiene App.

Die Bilder, die ich im Karussell zeigen möchte, stammen aus dem Modell image.rb.

Die Sache ist, wenn ich die Logik hinzufügen, um die Bilder im Karussell anzuzeigen, erscheinen sie übereinander.

Ich bin mir nicht sicher, was zu tun ist, aber ich verstehe, dass das Karussell alle Bilder für das ausgewählte Produkt anzeigt.

Ich habe früher mit Bootstrap Karussells gearbeitet, aber nur in reinem html/css, so dass es in einer Rails App funktioniert, ist neu für mich.

Kann mir bitte jemand raten, wie ich die Bilder so aussehen lassen kann, wie es normalerweise sollte?

Unten ist der Karussell-Code in den show.html.erb

<div class="container"> 
    <div id='carousel-custom' class='carousel slide' data-ride='carousel'> 
     <div class='carousel-outer'> 
      <!-- me art lab slider --> 
      <div class='carousel-inner '> 
       <div class='item active'> 
        <% @product.images.each do |image_product| %> 
         <%= image_tag image_product.image.url(:medium), class: "img-responsive", id: "zoom_05" %> 
        <% end %> 
       </div> 

       <script> 
        $("#zoom_05").elevateZoom({ zoomType : "inner", cursor: "crosshair" }); 
       </script> 
      </div> 
      <!-- sag sol --> 
      <a class='left carousel-control' href='#carousel-custom' data-slide='prev'> 
       <span class='glyphicon glyphicon-chevron-left'></span> 
      </a> 
      <a class='right carousel-control' href='#carousel-custom' data-slide='next'> 
       <span class='glyphicon glyphicon-chevron-right'></span> 
      </a> 
     </div> 
        <!-- thumb --> 
     <ol class='carousel-indicators mCustomScrollbar meartlab'> 
      <li data-target='#carousel-custom' data-slide-to='0' class='active'> 
       <% @product.images.each do |image_product| %> 
        <%= image_tag image_product.image.url(:small), class: "img-responsive", id: "zoom_05" %> 
       <% end %> 
      </li> 
     </ol> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".mCustomScrollbar").mCustomScrollbar({axis:"x"}); 
     }); 
    </script> 
</div> 

Answer 1

Wenn ich mich nicht täuscht das Problem ist, dass alle Eltern div der Bilder, die Klassen item active hat und nur muss die active Klasse.

Siehe auch data-slide-to Attribut der li s innerhalb der ol Element.

<li data-target='#carousel-custom' data-slide-to='0' class='active'> 
    <% @product.images.each do |image_product| %> 
    <%= image_tag image_product.image.url(:small), class: "img-responsive", id: "zoom_05" %> 
    <% end %> 
</li> 

Sie sind alwasys eine Folie in der Nullposition hinzufügen.

Es muss so etwas wie dieses:

<div class="container"> 
    <div id='carousel-custom' class='carousel slide' data-ride='carousel'> 
     <div class='carousel-outer'> 
      <!-- me art lab slider --> 
      <div class='carousel-inner '> 
       <% @product.images.each_with_index do |image_product, index| %> 
        <div class="<%= index == 0 ? 'item active' : 'item' %>" > 
         <%= image_tag image_product.image.url(:medium), class: "img-responsive", id: "<%= index == 0 ? 'zoom_05' : '' %>" %> 
        </div> 
       <% end %> 

       <script> 
        $("#zoom_05").elevateZoom({ zoomType : "inner", cursor: "crosshair" }); 
       </script> 
      </div> 
      <!-- sag sol --> 
      <a class='left carousel-control' href='#carousel-custom' data-slide='prev'> 
       <span class='glyphicon glyphicon-chevron-left'></span> 
      </a> 
      <a class='right carousel-control' href='#carousel-custom' data-slide='next'> 
       <span class='glyphicon glyphicon-chevron-right'></span> 
      </a> 
     </div> 
        <!-- thumb --> 
     <ol class='carousel-indicators mCustomScrollbar meartlab'> 
      <% @product.images.each_with_index do |image_product, index| %> 
       <li data-target='#carousel-custom' data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>" > 
        <%= image_tag image_product.image.url(:small), class: "img-responsive", id: "" %> 
       </li> 
      <% end %> 
      </li> 
     </ol> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".mCustomScrollbar").mCustomScrollbar({axis:"x"}); 
     }); 
    </script> 
</div> 

Im Iterator mit index == 0 ich überprüfen, ob, wenn es das erste Bild der active Klasse zu setzen.

Auch mit der gleichen Sache, in der li's innerhalb der ol ich setze das slide-to Attribut.