简体   繁体   English

猫头鹰轮播加载问题

[英]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). owl carousel 加载问题 我正在使用 jquery 插件 owl-carousel 我根据指南设置了我的 carousel,但它显示了 owl-carousel 加载(添加到 dom owl-loading 的类)。 I added my custom style or javascript code.我添加了我的自定义样式或 javascript 代码。 Please help me in solving this problem.请帮我解决这个问题。 Thanks in advance.提前致谢。

html 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 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>

Try using setTimeout function on calling owlCarousel function.尝试在调用 owlCarousel 函数时使用 setTimeout 函数。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM