Question

我有两页说 page1 和 page2 。第1页包含多行中的所有项目（ 参见pic1 ），我使用 owl carousel 来为每一行添加一个响应滑块。第2页包含每个项目的详细信息。

PIC1：

问题：

从第1页转到第2页并返回第1页后，项目（预计第一项）从行中消失（ 参见pic2 ）。只有当我再次刷新page1时，它们才会出现。

PIC2：

我尝试在控制台中检查生成的html，并且我发现有一个 由owl轮播添加了四个额外的div 导致这些项目消失为了确保，我 在控制台中删除了这四个额外的div，这些项目显示回来 。下面是控制台中生成的html

正常情景：

<div class="page landing_page">
  <div class="container container-home">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <h2 class="carousel_title"></h2>
      <div id="owl_demo_action_1" class="carousel_slide owl-carousel owl-theme" style="opacity: 1; display: block;">
      <div class="owl-wrapper-outer">
      <div class="owl-wrapper" style="width: 2676px; left: 0px; display: block;">
      <div class="owl-item" style="width: 223px;">
      <div class="item">
        <a href="">
        <img src="">
          <div class="caption_bar">
            <p class="movie_title"></p>
            <p class="movie_year"></p>
          </div>
        </a>
      </div>
      <!-- more items -->
     </div>
   </div>
   </div>
</div>

发生问题时

：

<div class="page landing_page">
  <div class="container container-home">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <h2 class="carousel_title"></h2>
      <div id="owl_demo_action_1" class="carousel_slide owl-carousel owl-theme" style="opacity: 1; display: block;">
      <div class="owl-wrapper-outer">
      <div class="owl-wrapper" style="width: 3568px; left: 0px; display: block;">
      <div class="owl-item" style="width: 223px;">
      <div class="owl-wrapper-outer">
      <div class="owl-wrapper-outer">
      <div class="owl-wrapper" style="width: 3568px; left: 0px; display: block; transform: translate3d(0px, 0px, 0px);">
      <div class="owl-item" style="width: 223px;">
      <div class="item">
        <a href="">
        <img src="">
        <div class="caption_bar">
          <p class="movie_title"></p>
          <p class="movie_year"></p>
        </div>
        </a>
      </div>
    </div>
    </div>
 </div>

请注意上述代码段中的四个额外div。

以下是我用于显示带有猫头鹰轮播的项目的代码段

<%@first_menu_list_items.sort{|x,y| x["list_order"] <=> y["list_order"] if x["theme"] == "catalog_list"}.each_with_index do |c,index| %>
  <%unless c['catalog_list_items'].blank?%>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
    <h2 class="carousel_title"><%=c['display_title']%></h2>
    <div id="owl_demo_action_<%=index%>" class="carousel_slide owl-carousel owl-theme">
    <%c["catalog_list_items"].each do |i|%>
      <div class="item">
      <a href="<%=get_item_url(i)%>">
      <img src="<%=i['thumbnails']['l_medium']['url']%>">
      <div class="caption_bar">
        <p class="movie_title"><%=truncate(i['title'],:length => 15)%></p>
        <p class="movie_year"><%= i['release_date'] %></p>
      </div>
      </a>  
      </div>
    <%end%> 
    </div>  
  </div>
  </div>
  <% end %>
<% end %>

<script>
  var cnt = "<%=@first_menu_list_items.count%>";
  for (i = 0; i < cnt; i++) { 
  var owl = $("#owl_demo_action_"+i);
    owl.owlCarousel({
    itemsCustom : [
    [0, 2],
    [440, 3],
    [768, 4],
    [1366, 5]
    ],
    navigation : true

  });
}
</script>

如果有人对此有所了解，我将非常感激。

Answer 1

我遇到了OwlCarousel2和Turbolinks5的问题 - 在浏览器“后退”按钮上点击我的猫头鹰旋转木马已经消失了。所以，我找到了这些代码行的解决方案：

    # owl carousel in html.erb
    <div class="owl-carousel owl-theme" id="owl">
      <% @trip_route.places_ordered.each do |place| %>
        <div><%= image_tag 'placeholder.png' %></div>
      <% end %>
    </div>

    # application.js
    //on turbolinks:load init owlCarousel
        $(document).on("turbolinks:load", function() {
           $("#owl").owlCarousel();
        }
    //on turbolinks:before-cache destroy it owlCarousel
        $(document).on('turbolinks:before-cache', function() {
          $("#owl").owlCarousel('destroy');
        });

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

问题与猫头鹰轮播项目在Rails中消失

1 个答案: