- This topic has 1 reply, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
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: nonesetting that I need to remove but I’m not able to find it ;-/Any advice is much appreciated.
Best,
JanCustomer Support
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.
- You must be logged in to reply to this topic.
