Question

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

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

当我点击＆＃39;全部＆＃39;哪个应该显示相同的输出我得到以下

点击全部＆＃39;只需隐藏所有其他类型并显示全部＆＃39;全部＆＃39;类型，这是代码;

$(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]
  }
);

这是Carousel

<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

刚刚找到我的答案，而不是问题

我将第一个后备列表（＆＃39; All＆＃39;）设置为内联，当我应该使用块时

这

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

到

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

猫头鹰旋转木马打破了第一个coursel

1 个答案: