Archived topic

Customizer / carousel / display none

1 reply · Started by Jan on December 21, 2022

Viewing posts 1–2 of 2

December 21, 2022 at 2:42 am #2469117

Hi there,

I migrated an owl carousel from one site to another. The carousel itself is working fine. However, it is only visible when the Customizer is active. See screen recording.

In the Additional CSS section, I added the following:

/* Owl carousel - Position and style navigation icons */

#referenzen button {
    background-color: rgba(255, 255, 255, 0);
}

#referenzen {
    position: relative;
}

#referenzen .owl-nav > button  {
    position: absolute;
    top: 35%;
    z-index: 100;
}

#referenzen .owl-nav .owl-prev {
    left: 0;
}

#referenzen .owl-nav .owl-next {
    right: 0;
}

@media(max-width: 768px) {
.nav-btn {
    display:none
}
}

My working assumption is that there is a display: none setting that I need to remove but I'm not able to find it ;-/

Any advice is much appreciated.

Best,
Jan

December 21, 2022 at 4:57 am #2469249

Hi there,

the Owl Carousel requires jQuery.
And jQuery is normally loaded in the <head> of the site. On your site however jQuery has been moved to load in the footer, and it is being loaded after the owl carousels init script ie. this script:

jQuery(document).ready(function($){
  $(".owl-carousel").owlCarousel();
});

So when that script fires, the browser can't find the jQuery Variable as it has not been loaded yet.

I assume you have used a Hook to load that script ? If so increase its priority to 999. It should move the script after the jquery install.

This archived topic is closed to new replies.

Start building better websites today.