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

I'm adding a this https://bootsnipp.com/snippets/55Z0v Bootstrap carousel to a rails app.

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

The pictures I wan't to show in the Carousel comes from the image.rb model.

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

The thing is when I add the logic to display the images in the carousel, they are appearing on top of each other.

问题是，当我添加逻辑以在旋转木马中显示图像时，它们彼此叠加。

I'm not sure what to do, but I understand that the Carousel is displaying all images for the selected product.

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

I have worked with bootstrap carousels before, but only in pure html/css, so working on it in a Rails app is new for me.

我之前曾使用过bootstrap轮播，但仅限于纯html / css，所以在Rails应用程序中进行操作对我来说是新的。

Can someone please advise me how I can make the images appear like it should normally?

有人可以告诉我如何使图像看起来像它应该正常吗？

Below is the carousel code in the show.html.erb

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

1 个解决方案

#1

If I am not mistaken the problem is that all the parents div of the images has the classes item active, and only must has the active class.

如果我没有弄错的话，问题是图像的所有父级div都有类项活动，并且只能有活动类。

Also look at data-slide-to attribute of the lis inside the ol element.

另请参阅ol元素中lis的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>

You are alwasys adding a slide in the position zero.

你是alwasys在零位置添加一张幻灯片。

It must be something like this:

必须是这样的：

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

In the iterator with index == 0 I check that if its the first image to set the active class.

在索引== 0的迭代器中，我检查它是否是第一个设置活动类的图像。

Also, with the same thing, in the li's inside the ol I set the slide-to attribute.

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

#1