jquery - Rails 应用程序中的 Bootstrap Carousel，显示所有图像但没有缩略图。在 Carousel 中显示来自数据库的图像

Question

我要添加一个 https://bootsnipp.com/snippets/55Z0v将轮播 Bootstrap 至 Rails 应用。

我不想在 Carousel 中显示的图片来自 image.rb 模型。

问题是当我添加逻辑以在轮播中显示图像时，它们会出现在彼此之上。

我不确定该怎么做，但我知道轮播正在显示所选产品的所有图片。

我以前使用过 bootstrap carousels，但只是在纯 html/css 中，所以在 Rails 应用程序中使用它对我来说是新的。

有人可以告诉我如何使图像正常显示吗？

下面是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

如果我没记错的话，问题是图像的所有父级 div 都有类 item active，并且只必须有 active类。

另请查看 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>

您总是在零位置添加幻灯片。

一定是这样的:

<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 属性。