Rails 应用程序中的引导轮播，显示所有图像，不显示缩略图。在轮播中显示数据库中的图像

Posted 2023-05-08

【中文标题】Rails 应用程序中的引导轮播，显示所有图像，不显示缩略图。在轮播中显示数据库中的图像

【英文标题】：Bootstrap Carousel in Rails app, showing all images and no thumbnails. Displaying images from database in Carousel

【发布时间】：2018-01-12 18:34:55

【问题描述】：

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

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

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

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

我以前使用过引导轮播，但只使用纯 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>

【参考方案1】：

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

还要查看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>

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

一定是这样的：

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

【讨论】：

@codergirl 我在您发布的代码中发现了另一个错误，即lis 中的slide-to 属性，来自ol

对不起@MatayoshiMariano，我很快接受了，这不起作用退出正确，你以前的代码工作得更好，如果我实现这个代码缩略图不可见，并且轮播主图像卡住了仅在一张图片上...我真的不知道为什么，因为index == 0对我来说很有意义。

另外，如果我向每个产品添加两个以上的图像，一切都会中断。由于轮播中不能在超过 2 张图像之间滑动，这很奇怪

@codergirl 如果 indexación os 不为零，我忘记将 item 添加为一个类。 Aldo 我将"" 添加到具有<%= 的标签中的代码中。如果它不起作用，我明天再看看