Railsアプリのブートストラップカルーセル。すべての画像とサムネイルは表示されません。カルーセルのデータベースからの画像の表示

Question

私はこのhttps://bootsnipp.com/snippets/55Z0vブートストラップカルーセルをレールアプリに追加しています。

回転台に表示させたくない画像はimage.rbモデルです。

カルーセルの画像を表示するロジックを追加すると、物が上に表示されます。

私は何をすべきかわかりませんが、選択した商品のすべての画像をカルーセルが表示していることがわかりました。

以前はブートストラップカルーセルで作業していましたが、純粋なhtml/cssでしか動作しませんでしたので、Railsアプリケーションで作業するのは新しいものです。

画像を通常どおりに表示させる方法を教えてもらえますか？以下は

私は問題はすべての親の画像のdivはクラスitem activeを持っている、とだけactiveクラスを持っていなければならないということです間違っていないです場合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

でカルーセルコードです。

ol要素内のliの属性も参照してください。data-slide-to

<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> 

あなたはalwasys位置ゼロでスライドを追加しています。

<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> 

イテレータでindex == 0と私はその最初の画像はactiveクラスを設定している場合かどうかを確認：

それはこのようなものでなければなりません。

また、同じことでol内のli'sではslide-to属性を設定しました。