Question

我尝试了以下代码，但图像显示在列表视图中。在这里，我尝试改变所有内容，比如我添加了循环的jquery代码，但没有任何工作。

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="OwlCarousel2-2.2.0/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="OwlCarousel2-2.2.0/dist/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="owl-carousel sliderImgs owl-loaded">
        <div class="item"><img src="images/1.jpg"></div>
        <div class="item"><img src="images/2.jpg"></div>
        <div class="item"><img src="images/3.jpg"></div>
        <div class="item"><img src="images/4.jpg"></div>
        <div class="item"><img src="images/5.jpg"></div>
        <div class="item"><img src="images/6.jpg"></div>
        <div class="owl-controls">
            <div class="owl-nav">
                <div class="owl-prev">prev</div>
                <div class="owl-next">next</div>
            </div>
            <div class="owl-dots">
                <div class="owl-dot active"><span></span></div>
                <div class="owl-dot"><span></span></div>
                <div class="owl-dot"><span></span></div>
            </div>
        </div>
    </div>

<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="OwlCarousel2-2.2.0/dist/owl.carousel.min.js"></script>
</body>
</html>

这是js文件

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

这是css文件

img
{
/*display: block;*/
height: 50%;
width: 50%;
}

任何建议将不胜感激。感谢

Answer 1

按照特定顺序加载资源（参见底部的工作示例）：

<head>

assets/owl.carousel.min.css
assets/owl.theme.default.min.css

<body>

放置<div>类owl-carousel和owl-theme以及您选择的任何其他自定义类，您希望在哪里显示轮播。任何其他特定的轮播类 不应添加 （即owl-loaded）。
在此div区<div>内包含图像，如下例所示，没有类item（它将由轮播添加）。您可以添加自定义类，如果您需要它们来设置特定幻灯片的样式，但不能添加owl个特定类不要放置任何其他旋转木马特定标记（如上一个/下一个按钮或子弹）。根据您的初始化选项，它们将由轮播添加。
jquery.min.js（确保加载并且路径正确）
owl.carousel.min.js（来自/dist文件夹，确保加载）
您自己的<script>，其中包含对初始化的调用。

重要方面：

5,6和7 必须按此顺序加载。它们可以放在3和4之前，甚至可以包含在<head>标签中。但是，如果您将它们放在<body>内，在首屏下方，您的网页似乎会加载得更快。实际上，它将加载完全相同，但加载页面时呈现的可见元素将在加载5,6和7之后加载，因此它看起来加载速度较慢。
如果您在<body>内加载1和2，使用<style>标签，这是不推荐的，如果它们放在轮播标记之后，某些浏览器可能会呈现快速未设置样式在解析CSS之前，您的轮播版本。这就是为什么最好在<head>中加载它们。
将type="text/javascript"放置在您的所有JavaScript <script>个代码上（jQuery是JavaScript库）。

工作示例：

＆＃13;

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

<div class="owl-carousel owl-theme">
  <div><img src="http://lorempixel.com/g/800/600/nightlife"></div>
  <div><img src="http://lorempixel.com/g/800/600/fashion"></div>
  <div><img src="http://lorempixel.com/g/800/600/nightlife"></div>
  <div><img src="http://lorempixel.com/g/800/600/fashion"></div>
  <div><img src="http://lorempixel.com/g/800/600/nightlife"></div>
  <div><img src="http://lorempixel.com/g/800/600/fashion"></div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<script type="text/javascript">
$('.owl-carousel').owlCarousel({
   loop:true,
   margin:10,
   nav:true,
   responsive:{
     0:{
       items:1
     },
     600:{
       items:3
     },
     1000:{
       items:5
     }
   }
 });
</script>

＆＃13;

我的猫头鹰Carousel无法正常工作

1 个答案: