Ausgabe mit Eule Karussell Artikel verschwinden in Rails

Question

Ich habe zwei Seiten sagen page1 und page2. Seite1 enthält alle Elemente in mehreren Reihen (siehe Bild1) und ich bin mit Eule Karussell einen ansprechenden Regler nach jeder Zeile hinzuzufügen. Seite 2 enthält die Details jedes Artikels.

pic1:

Ausgabe:

Nach dem page1 page2 gehen und kommen zurück auf Seite1, die Elemente (erwarten, dass die erste) verschwindet aus der Reihe (s ee pic2). Sie erscheinen wieder nur, wenn ich die Seite1 erneut aktualisiere.

Bild2:

Ich habe versucht, den erzeugten HTML-Code in der Konsole zu überprüfen und ich habe festgestellt, dass es vier zusätzliche divs durch das Karussell Eule hinzugefügt wird wodurch die Elemente verschwinden. Um sicherzustellen, dass ich diese vier extra divs in der Konsole gelöscht und die Elemente erscheint wieder. Im Folgenden finden Sie die erzeugte HTML-Code in der Konsole

Normalszenario:

<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> 

wenn es Ausgabe:

<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> 

Beachten Sie die vier zusätzliche divs in der obigen Schnipsel.

Unten ist mein Code-Schnipsel verwendet, um die Elemente anzuzeigen mit Eule Karussell

<%@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> 

ich sehr dankbar sein, wenn jemand etwas Licht in diesen Schuppen.

Answer 1

Ich hatte Probleme mit OwlCarousel2 und Turbolinks5 - auf Browser 'Zurück' klicken klicken mein Eulenkarussell war verschwunden.So fand ich Lösung mit diesen Zeilen Code:

# 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