Question

我将这个https://bootsnipp.com/snippets/55Z0v Bootstrap轮播添加到rails应用程序中。

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

当我添加逻辑以在旋转木马中显示图像时，它们就会出现在彼此之上。

我不知道该怎么做，但据我所知，Carousel正在显示所选产品的所有图片。

之前我曾使用过bootstrap轮播，但仅限于纯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类。

另请查看data-slide-to元素中li s的ol属性。

<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类的图像。

另外，同样的事情，我在li's内的ol设置了slide-to属性。

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

1 个答案: