jquery – Owl carousel delays load on wordpress

Question

I have some issues regarding the owl carousel in WordPress and Elementor. First of all, I add the .owl-carousel class in document.ready and then I instantiate the owl carousel options. I face two issues. The first one is that on-page load the owl carousel needs some time to load (less than a second) and this makes the user see the transition from a simple grid to carousel. I guess this has to do with the dom and that it is not ready from the start.

The second is that in Elementor I cannot see the owl carousel effect at all (less important).

Here is the code that I use in my child theme.js file.

(function($){

$(document).ready(function(){

    $('.dc-homepage-carousel .elementor-widget-wrap').addClass('owl-carousel');

      $('.dc-homepage-carousel .owl-carousel').owlCarousel({
    loop:true,
    nav:true,
    margin:3,
    dots: false,
    autoplay: true,
    autoplayHoverPause: true,
    autoplaySpeed: 1000,
    animateOut: 'fadeOut',
    smartSpeed :900,
    navText : ["<i class="fa fa-chevron-left"></i>","<i class="fa fa-chevron-right"></i>"],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:6
        }
    }
})

});
})(jQuery);

in progress 0
Bariock 2 months 2021-07-30T01:41:40-05:00 0 Answer 0 views 0

Answer ( 1 )

    0
    2021-08-01T07:49:35-05:00

    Are you 100% sure the proper CSS are loaded? “on-page load the owl carousel needs some time to load” this should not be an issue, as the look should already be the same or very similar as the carousel itself. In my latest projects, if I disable JS and load the page, the carousel looks same just without functionality.

Leave an answer

Browse
Browse