Owl 旋转木马在第一道菜时中断

Question

我在 RefineryCMS 项目中使用 Owl Carousel。我在同一页面上有多个 Owl 轮播，我通过单击一种类型在它们之间切换。然后它显示了与该类型相关的许多书籍。它加载显示所有书籍，但是当我在一个类型之间单击并返回到第一个类型时，第一个旋转木马然后修改宽度，以便书籍运行离开一边。

示例：当我加载时它是正确的

当我点击 'All' 应该显示相同的输出时，我得到以下信息

点击 'All' 只会隐藏所有其他流派并显示 'All' 流派，这是相关代码；

$(function() {
  $(".genre_link").each(function(){
    $(this).click(function(){
      var genre = this.getAttribute('data-genre'); // Get the genre we are talking about
      $(".backlists").hide(0, function(){          // First hide all
        $("#" + genre).show();  // Show the one genre after all have been hidden.
      });
    })
  })
})

这是我运行加载时的代码。

$(".owl-carousel").owlCarousel(
  {
    items: 5,
    itemsDesktop : [500,3],
    itemsDesktopSmall : [400,3]
  }
);

这是旋转木马

<div id="genres">

    <div class="form-style-2-heading"></div>

    <!-- Genre links -->
    <% @all_genres.each do |genre| %>
        <%= link_to genre[:name], "#/#{genre[:name]}", class: "genre_link", data: {genre: genre[:name]} %>
    <% end %>

    <!-- Books per genre -->
    <% @all_genres.each do |genre| %>
        <div id="<%= genre[:name] %>" class="backlists">
            <div class="owl-carousel">
                <% genre[:backlists].each do |backlist| %>
                    <div>
                        <li>
                            <%= image_fu(backlist.picture, "120x160#") %>
                            <br />
                            <div class="product_title">
                                <%=raw backlist.title %>
                            </div>
                            <div class="product_author">
                                <%=raw backlist.author %>
                            </div>
                        </li>
                    </div>
                <% end %>
            </div>
        </div>
    <% end %>

</div>

如果我将空白作为数组中的第一个，那么问题就解决了。这是一个非常 hacky 的解决方案，然后会导致菜单中出现空白的其他问题。

Answer 1

刚找到问题中没有的答案

我将第一个后备列表 ('All') 设置为内联，而我本应使用 block

来自

$(".backlists").first().css("display", "inline")

至

$(".backlists").first().css("display", "block")

Owl 旋转木马在第一道菜时中断

Owl Carousel breaks on first coursel

jquery

owl-carousel

refinerycms