Question

这是我的代码html代码..

<div class="sliderImgs">
    <img src="img/1.jpg" alt="">
    <img src="img/man.jpg" alt="" >
    <img src="img/slider.jpg" alt="">
</div>

owl carousel jquery

$('.sliderImgs').owlCarousel({
        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true,
        autoPlay: 1000
    });

和css

.sliderImgs img{display:block;width:100%;height:auto;}

Answer 1

我尝试了你的代码，它在codepen示例

中运行正常

codepen example

请验证是否加载了jquery，并且在jquery之后应该包含Owl js文件

与此类似：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />

Answer 2

您的代码必须如下所示。

<div class="sliderImgs">
        <div class="item"><img src="img/1.jpg" alt="" /></div>
        <div class="item"><img src="img/man.jpg" alt="" /></div>
        <div class="item"><img src="img/slider.jpg" alt=""></div>
</div>

OWL Carousel不工作

2 个答案: