Bug Fixing For The Fancy Carousels...

So you’ve followed my last guide, got a carousel, looks alright maybe, but somethings not quite right… For me it was the reloads and dragging, things would lose position, lose size, it just got real haywire. So it took me a little messing around to sort it but I’m here to share it with you!
  • Owl Carousel not showing up properly?
  • Owl Carousel ignoring parameters?
  • Reloading Owl Carousel breaks it?
  • Custom CSS not being applied to your carousel?
Read on!

First Up, The “ on(‘turbolinks:load) “
So I’m loading the carousel as a partial, I’m not sure if this will create an issue in a static page, but better safe than sorry.
In the script tags, at the bottom of the page where you initialise the carousel, wrap it all up in a turbolinks:load. The line above that, the destroy one, is important for later ;
<script>$(document).on('turbolinks:load', function () {
 $("#blog-carousel").owlCarousel('destroy');
 $("#blog-carousel").owlCarousel({items: 3,
 loop: true,
 center: true,
 margin: 10,
 slideSpeed: 7000,
 responsiveClass: true,
 responsive: {
 0: {
 items: 1,
 },
 500: {
 items: 3,
 },
 5000: {
 items: 3,
 }
  }
 });
……
A big thing that was happening was that it would look fine at first, then an internal link back to the front page would break it. This fixes that. For some reason it was ignoring the options we gave it the second time around. Presumably because a cached version of the carousel was lingering, but without the options. This destroys that original and builds a new one.

Triggering That Custom CSS
This one’s easy. Remember last post? When you set up those event listeners to apply new classes to your cards so they would look nice? It looked something like this;
$("#blog-carousel").on('change.owl.carousel', function (event) {
    $(this).find(".owl-item").removeClass('main-carousel');
    $(this).find(".owl-item").addClass('small-carousel');
    ……
}
Well to ensure you’re styling is always applied, just trigger a change during the page load, right after your carousel initialisation;
$("#blog-carousel").trigger('change');
That’s it, really. I had numerous other issues because I had multiple carousels on the same page and the selectors were having trouble figuring out what I wanted, but just make sure that everything (everything!) is unique in this case. There has to be individual event handlers.

Good luck! Drop me a line HERE if you have any feedback!

Comments (Coming Soon)