Question

我无法让Owl Carousel工作。我看不出我做错了什么，有人可以帮忙吗？我确信这很简单。为了确认，我已经确认.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

在引用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 2

在＆lt; head＆gt;中添加脚本之前执行其他脚本代码是因为代码来自＆＃34; $（document）.ready（）＆＃34; onwards使用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 3

@Chitrang / @all 以下是一些答案，为什么不在＆lt; head＆gt;＆lt; / head＆gt;中写＆lt; script＆gt;＆＃39;块。

查看链接： Are <script>'s not in <head> ok?

迎接。

猫头鹰旋转木马 - 空白页

3 个答案: