CODEWITHSUNDEEP
jquerycssowl-carousel
IVCatalina
IVCatalina

Reputation: 356

Owl Carousel - Blank Page

I can't get Owl Carousel working. I can't see what i've done wrong, can anyone help? I'm sure it's something simple. Just to confirm, I have confirmed that all links to .css and .js files are working properly. I just get a blank page everytime.

This is the one I am trying to implement:

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

My Code:

<!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>

Upvotes: 1

Views: 3104

Answers (3)

koby
koby

Reputation: 33

@Chitrang / @all Here are some answers, why dont write <script>'s in <head></head> block.

See the Link: Are <script>'s not in <head> ok?

greets.

Upvotes: 0

Dan-Levi T&#248;mta
Dan-Levi T&#248;mta

Reputation: 846

You have code that depends on jQuery running before you reference jQuery, this is what 'ReferenceError: $ is not defined' really means.

Look here: 

<!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>

Take note of whhere <script src="jquery-1.11.3.min.js"></script> is. All the code that depends on jQuery is after.

Upvotes: 2

Chitrang
Chitrang

Reputation: 2114

Add scripts in <head> before executing other script code because code from "$(document).ready()" onwards uses jQuery and Own Carousel libraries.

<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>

Upvotes: 0

Related Questions