Owl 轮播 - 空白页

Question

我无法让 Owl 轮播工作。我看不出我做错了什么，有人可以帮忙吗？我敢肯定这很简单。只是为了确认，我已经确认所有指向 .css 和 .js 文件的链接都正常工作。我每次都是空白页。

这是我要实现的：

http://www.owlcarousel.owlgraphic.com/demos/rtl.html

我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>


<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
</script>

<script>
$('.owl-carousel').owlCarousel({
    rtl:true,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>


<body>



<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>


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

</body>
</html>

Answer 1

在执行其他脚本代码之前在添加脚本因为从“$(document).ready()”开始的代码使用 jQuery 和 Own Carousel 库。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="owl.carousel.min.js"></script>
</head>

Answer 2

在引用 jQuery 之前，您的代码依赖于 jQuery 运行，这就是 'ReferenceError: $ is not defined' 的真正含义。

看这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" href="owl.carousel.min.css">
        <link rel="stylesheet" href="owl.theme.default.min.css">
    </head>
    <body>
    <div class="owl-carousel">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
    </div>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="owl.carousel.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.owl-carousel').owlCarousel({
            rtl:true,
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        })
    });
    </script>
    </body>
</html>

记下 <script src="jquery-1.11.3.min.js"></script> 的位置。所有依赖jQuery的代码都在.

之后

Answer 3

@Chitrang / @all 这里有一些答案，为什么不在块中写

Owl 轮播 - 空白页

Owl Carousel - Blank Page

jquery

css

owl-carousel