Owlcarousel2: Turbolinks

Created on 12 Feb 2017 · 9Comments · Source: OwlCarousel2/OwlCarousel2

Opening this cause of a compatibility issue with Rails 4.2.7.1 and Turbolinks 5.0.1.

The plugin is rendering just fine on first page load and refresh but it breaks on browser back button.

This is my code:

applications.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require owl.carousel
//= require custom

custom.js

$(function () {
  $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        items: 4
  });
});

index.html

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

application.css

 /*
 *= require_tree .
 *= require_self
 */

custom.css

.item {
  height: 100px;
  background-color: red;
  color: black;
  margin: 3px;
}

.item img{
  display: block;
  width: 100%;
  height: auto;
}

With this code on navigation back from a second page the plugin in unresponsive but the layout is ok.
Screenshot

After reading around about Turbolinks I have changed the code to this:

document.addEventListener("turbolinks:load", function() {
  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      items: 4
  });
});

The plugin is responsive now but the layout is broken.
Screenshot

Source

breiko83

Most helpful comment

Hi @FugiOnline,
the workaround I found was to destroy the carousel at turbolinks:before-cache and re-initialize it at turbolinks:load.

Try the following:

document.addEventListener("turbolinks:load", function() {
  $('.owl-carousel').owlCarousel({
      loop:true,
      nav:true,
      items: 4
  });
});

document.addEventListener("turbolinks:before-cache", function() {
  $('.owl-carousel').owlCarousel('destroy');
});

I have also updated the example here: https://owlcarousel.herokuapp.com/

breiko83 on 14 Aug 2017

👍6

All 9 comments

(Sorry about the canned reply.)

You have not added a link to a working live example.

Please add a link to a page where I can verify this error. You can use a service like jsfiddle, plnkr, jsbin or codepen.

And make sure you're using the latest Owl Version! I will close this issue for now. Once you provided a working example you can reopen it.

pascalporedda on 13 Feb 2017

Hi @CracyCrazz, you are right sorry about that.

This is a link to a working example: https://owlcarousel.herokuapp.com/

breiko83 on 13 Feb 2017

@breiko83 I am having this exact same issue and cannot get it to work properly.

Did you ever find a working solution?

FugiOnline on 12 Aug 2017

Hi @FugiOnline,
the workaround I found was to destroy the carousel at turbolinks:before-cache and re-initialize it at turbolinks:load.

Try the following:

document.addEventListener("turbolinks:load", function() {
  $('.owl-carousel').owlCarousel({
      loop:true,
      nav:true,
      items: 4
  });
});

document.addEventListener("turbolinks:before-cache", function() {
  $('.owl-carousel').owlCarousel('destroy');
});

I have also updated the example here: https://owlcarousel.herokuapp.com/

breiko83 on 14 Aug 2017

👍6

Yes! @breiko83 this is awesome, you just fixed my problem! Confirmed working. Triggers me to learn more about Turbolinks!

FugiOnline on 14 Aug 2017

Thank you so much for the solution @breiko83!