我在RefineryCMS项目中使用Owl Carousel . 我在同一页面上有多个Owl Carousel，我通过点击一个类型在这些之间切换 . 然后它显示了许多与该类型相关的书籍 . 它显示所有书籍，但是当我在一个类型之间点击并返回到第一个类型时，第一个轮播然后修改宽度，以便书籍从侧面运行 .
示例：当我加载它是正确的
当我点击应显示相同输出的'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#") %>
<div class="product_title">
<%=raw backlist.title %>
</div>
<div class="product_author">
<%=raw backlist.author %>
</div>
</li>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
如果我把一个空白作为数组中的第一个，那么它解决了问题 . 这是一个非常hacky的解决方案，然后在菜单中出现空白导致其他问题 .
1 回答
刚刚找到我的答案，这不是问题
当我应该使用块时，我将第一个后备列表（'All'）设置为内联
从
至