Question

我尝试使用Owl Carousel，但无法使其正常工作。我试图同时使用CDN和我的文件。 div设置为display none。不确定我为什么做错了。猫头鹰文件夹来自那里的网站，但我已重命名。

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

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

Answer 2

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

尝试以下代码：

"\"

Answer 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
            }
        }
    })
});

猫头鹰轮播设置为不显示

3 个答案: