Question

这是我的HTML代码

<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<div id="owl-demo">        
                <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
</div>

<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

 <script>
        $(document).ready(function(){
            $("#owl-demo").owlCarousel({
                autoPlay: 3000, //Set AutoPlay to 3 seconds
                items : 4,    
                itemsDesktop : [1199,3],
                itemsDesktopSmall : [979,3]
            });    

        });
    </script>

那就是css

#owl-demo .item{
   margin: 3px;
}
#owl-demo .item img{
   display: block;
   width: 100%;
   height: auto;
}

和carousal只是显示指标而不是图像，控制台没有出现任何错误，我尝试了很多，但问题没有解决？

注意：在检查元素.owl-carousel .owl-wrapper-outer当我使{overflow：visible}水平滚动出现并且当您将滚动向左移动时图像出现

在此处查看问题https://cde90a5c4d4962da8734f2f8af97a380e1d80b5d.googledrive.com/host/0B9nn9jFSK9EFMV9xOHctMm5zeHM/index.html

Answer 1

#owl-demo .item img{
   display: block;
   width: 100%;
   height: 500px;
}

Answer 2

问题是我的页面上的方向是rtl，所以你应该下载rtl插件版本http://www.owlcarousel.owlgraphic.com/demos/rtl.html

owl-carousal不显示图片

2 个答案: