Suraj Saini
Suraj Saini

Reputation: 1

owl carousel loading issue

owl carousel loading issue I am using jquery plugin owl-carousel I set up my carousel according to guide but it shows me owl-carousel loading(class added to dom owl-loading). I added my custom style or javascript code. Please help me in solving this problem. Thanks in advance.

html

                        <div id="owl" class="owl-carousel owl-theme partners_slider">

                            <!-- Partner Item -->
                            <div class="owl-item partner_item"><img src="./assets/img/client/partner_1.png" alt=""></div>

                            <!-- Partner Item -->
                            <div class="owl-item partner_item"><img src="./assets/img/client/partner_2.png" alt=""></div>

                            <!-- Partner Item -->
                            <div class="owl-item partner_item"><img src="./assets/img/client/partner_3.png" alt=""></div>

                            <!-- Partner Item -->
                            <div class="owl-item partner_item"><img src="./assets/img/client/partner_4.png" alt=""></div>

                            <!-- Partner Item -->
                            <div class="owl-item partner_item"><img src="./assets/img/client/partner_5.png" alt=""></div>

                            <!-- Partner Item -->
                            <div class="owl-item partner_item"><img src="./assets/img/client/partner_6.png" alt=""></div>

                        </div>
                    </div>

js

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js"></script>

    <script src="./assets/js/owl.carousel.js"></script>
    <script>
        $(window).on('load',function(){
            $('#owl').owlCarousel(
            {
                autoplay:true,
                smartSpeed:1200,
                lazyLoad : true,
                nav:false,
                dots:false,
                responsive:
                {
                    0:
                    {
                        items:1
                    },
                    480:
                    {
                        items:2
                    },
                    720:
                    {
                        items:3
                    },
                    991:
                    {
                        items:4
                    },
                    1199:
                    {
                        items:6
                    }
                }
            });

});

    </script>

Upvotes: 0

Views: 3728

Answers (1)

MD TAREK HOSSEN
MD TAREK HOSSEN

Reputation: 419

Try using setTimeout function on calling owlCarousel function.

setTimeout(function(){
    $(".owl-carousel").owlCarousel()
},
2000);

Upvotes: 2

Related Questions