CODEWITHSUNDEEP
javascriptjqueryhtmlowl-carousel
spøjst
spøjst

Reputation: 151

Owl carousel not showing at all

I'm having an issue with getting the Owl Carousel plugin to work in my project.

For testing purposes, I've created a new project, just to see if I could get the carousel to work solely on a page.

I reckon I've followed the instructions on https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html step by step.

I've added following files to my project folder:

The jquery.js file is the JavaScript call function.

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

Here's my index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="owl/owl.carousel.min.css">
    <link rel="stylesheet" href="owl/owl.theme.default.min.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="owl-carousel owl-theme">
        <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.js"></script>
    <script src="owl/jquery.min.js"></script>
    <script src="owl/owl.carousel.min.js"></script>
</body>

</html>

I'm currently as a point where noting at all appears on my page.

Obviously I'm missing or forgetting something, but as this is the first time I've tried to implement the Owl Carousel into a project of mine, I've very little experience.

Hopefully some of you lot can explain to me where I'm going wrong.

Thanks in advance, and sorry if this is a duplicate!

Upvotes: 0

Views: 1428

Answers (2)

Pramila Shankar
Pramila Shankar

Reputation: 426

I guess the jquery.js file is not being imported correctly.

I tried the same, just used function in the same html its working. And always import jquery.min.js or jquery.js javascript before owl carousel js files.

Please do check all css and js have been imported correctly.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/owlcarousel/owl.theme.default.min.css">
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/owlcarousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: { items: 1 },
600: { items: 3 },
1000: { items: 5 }
}
})
})
</script>
</head>
<body>
<div class="owl-carousel owl-theme">
<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>
</body>
</html>

Hope this helps you!! :)

Upvotes: 1

Jandeilson De Sousa
Jandeilson De Sousa

Reputation: 82

I really did not understand exacly what is your problem, but I've tried you code and a think is just the position of scripts. You put Owl Carousel function above Jquery (library) and Owl Carousel (plugin). The function that call owlCarousel need be interpreted, so for logical propurse Owl Carousel plugin must be above Owl Carousel function.

<script src="jquery.js"></script> <!-- here the problem -->
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
<!-- you need put owlCarousel before juery and owl.carousel -->

The correct would be:

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

Hope this help you! :)

Upvotes: 1

Related Questions