猫头鹰轮播设置为显示无答案

【问题标题】：Owl Carousel is set as display none猫头鹰轮播设置为显示无
【发布时间】：2020-03-11 09:09:58
【问题描述】：

我尝试使用 Owl Carousel，但无法使用。我尝试同时使用 cdn 和来自我的文件。 div 设置为无显示。不知道为什么我做错了。猫头鹰文件夹来自那里的网站，但我重命名了。

<link rel="stylesheet" type="text/css" href="/owl/dist/assets/owl.carousel.css"/>
<link rel="stylesheet" type="text/css" href="/owl/dist/assets/owl.theme.default.min.css"/>

<body>
<div class="owl-carousel owl-theme mt-5">
    <div class="item"><h4>1 testing</h4></div>
    <div class="item"><h4>2 testing</h4></div>
    <div class="item"><h4>3 testing</h4></div>
    <div class="item"><h4>4 testing</h4></div>
    <div class="item"><h4>5 testing</h4></div>
    <div class="item"><h4>6 testing</h4></div>
    <div class="item"><h4>7 testing</h4></div>
    <div class="item"><h4>8 testing</h4></div>
    <div class="item"><h4>9 testing</h4></div>
    <div class="item"><h4>10 testing</h4></div>
    <div class="item"><h4>11 testing</h4></div>
    <div class="item"><h4>12 testing</h4></div>
</div>
<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
</script>  

<script type="text/javascript" src="/owl/docs/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="/owl/dist/owl.carousel.js"></script>

【问题讨论】：

你检查你的控制台了吗？有没有js错误？
它确实有效jsfiddle.net/wksdrxug
哦，我发现了问题，我的脚本上面有 Jquery 的脚本，但它不知道“$”。谢谢！

标签： javascript css owl-carousel

【解决方案1】：

使用这个

<body>
<div class="owl-carousel owl-theme mt-5">
    <div class="item"><h4>1 testing</h4></div>
    <div class="item"><h4>2 testing</h4></div>
    <div class="item"><h4>3 testing</h4></div>
    <div class="item"><h4>4 testing</h4></div>
    <div class="item"><h4>5 testing</h4></div>
    <div class="item"><h4>6 testing</h4></div>
    <div class="item"><h4>7 testing</h4></div>
    <div class="item"><h4>8 testing</h4></div>
    <div class="item"><h4>9 testing</h4></div>
    <div class="item"><h4>10 testing</h4></div>
    <div class="item"><h4>11 testing</h4></div>
    <div class="item"><h4>12 testing</h4></div>
</div>
<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
</script>  

<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

【讨论】：

【解决方案2】：

jQuery 和 OwlCarousel 的脚本位于初始化 OwlCarousel 的脚本下方。因此，OwlCarousel 没有被认为是全球性的。因此，显示设置为无，这是未为该元素初始化 OwlCarousel 时的默认行为。

试试下面的代码：

<link rel="stylesheet" type="text/css" href="/owl/dist/assets/owl.carousel.css"/>
<link rel="stylesheet" type="text/css" href="/owl/dist/assets/owl.theme.default.min.css"/>

<body>
<div class="owl-carousel owl-theme mt-5">
    <div class="item"><h4>1 testing</h4></div>
    <div class="item"><h4>2 testing</h4></div>
    <div class="item"><h4>3 testing</h4></div>
    <div class="item"><h4>4 testing</h4></div>
    <div class="item"><h4>5 testing</h4></div>
    <div class="item"><h4>6 testing</h4></div>
    <div class="item"><h4>7 testing</h4></div>
    <div class="item"><h4>8 testing</h4></div>
    <div class="item"><h4>9 testing</h4></div>
    <div class="item"><h4>10 testing</h4></div>
    <div class="item"><h4>11 testing</h4></div>
    <div class="item"><h4>12 testing</h4></div>
</div>
<script type="text/javascript" src="/owl/docs/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="/owl/dist/owl.carousel.js"></script>
<script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
</script>

【讨论】：

【解决方案3】：

我也有同样的问题。

试试这个：

<script type="text/javascript" src="/owl/docs/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="/owl/dist/owl.carousel.js"></script>
<script>
$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    })
});

【讨论】：