猫头鹰旋转木马不显示图像答案

【问题标题】：Owl Carousel not showing images猫头鹰旋转木马不显示图像
【发布时间】：2018-05-08 09:45:36
【问题描述】：

我正在尝试将照片轮播添加到我的项目中，但 Owl 轮播不会显示我的图像（src 绝对正确），它会显示整个容器，底部有导航点和 prev/next 按钮，但不是我的图像。

不胜感激！

html:

 <head> 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
 <link href="plugins/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet">
 <link href="plugins/owl-carousel/assets/owl.theme.default.min.css" rel="stylesheet">
  </head>
  <body>
  <div class="container">
  <div class="owl-carousel owl-theme">
    <div class="owl-item">
        <img  src="images/1.jpg">
    </div>
    <div class="owl-item">
        <img  src="images/9.jpg">
    </div>
    <div class="owl-item">
        <img  src="images/10.jpg">
    </div>
    <div class="owl-item">
        <img  src="images/11.jpg">
       </div>
      </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="plugins//owl-carousel/owl.carousel.min.js"></script>

    <script type="text/javascript">
    $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        autoPlay: 1000,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:5
            }
        }
    });
    </script>
    </body>

【问题讨论】：

有实时预览吗？

标签： jquery twitter-bootstrap owl-carousel

【解决方案1】：

我已经解决了我的问题。显然 Owl Carousel 的页面设置为 rtl 时存在问题。

为了解决我的问题，我所要做的就是将rtl:true 添加到 jquery 函数中。

感谢所有的帮助者！

【讨论】：

【解决方案2】：

你能试试下面的代码吗

$('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        autoPlay: 1000,
         items:10,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:3
            },
            1000:{
                items:10
            }
        }
    });

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" media="screen"> 

<div class="container">
  <div class="owl-carousel owl-theme">
    <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
     <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
  <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
    <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
    <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
    <div class="item">
        <img  src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
    </div>
    </div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

【讨论】：

我需要将 jquery 1.12.4 用于某些插件。此代码有效，尽管按钮不起作用，但它们只是静态地坐在那里。是不是因为我的jquery版本？
等待我将提供使用您的查询的示例
@Dor GOlan 我已经用你的代码添加了更新的更改，如果有任何疑问，请检查并告诉我
我试过你的代码，现在容器根本没有显示
您只需要单个图像滑块？

【解决方案3】：

您在脚本路径中使用了双 / 用这个改变它

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

【讨论】：

我非常希望这是问题所在，但遗憾的是它不是。结果还是一样。
同时尝试删除“src”属性前的多余空格
并删除“owl-item”类

【解决方案4】：

请将 owl-item 类更改为除 owl carousel 默认关键字之外的其他名称，因为它会冲突。 see

【讨论】：

我尝试为您显示的项目创建一个新类，但仍然没有改变。
这是工作小提琴，所以我需要现场观看，因为我是从您的标记中创建的。
只需更改此类名称prntscr.com/jf7iy5 并检查图像路径jsfiddle.net/cdg04fkm/2 我也使用旧的jQuery 版本，因为你也使用过