CODEWITHSUNDEEP
jqueryhtmlowl-carousel
Aadi R.
Aadi R.

Reputation: 67

My owl Carousel is not working

I tried this given below code but the images is shown in list view. Here i have tried changing everything like i added jquery code of loop and all but nothing worked.

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

Here is the js file

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

Here is the css file

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

Any suggestions would be appreciated. Thanks

Upvotes: 3

Views: 39259

Answers (1)

tao
tao

Reputation: 90068

Load the resources in this specific order (see working example at the bottom):

In <head>

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

In <body>

  1. Place a <div> with classes owl-carousel and owl-theme and any other custom classes of your choice, where you want your carousel to be displayed. Any other specific carousel classes should not be added (i.e. owl-loaded).
  2. Inside this div place <div>s containing images, like in the example below, without the class item (it will be added by the carousel). You could add custom classes if you need them for styling particular slides but no owl specific classes.
    Don't place any other carousel specific markup, (like prev/next buttons or bullets). They will be added by the carousel, according to your initialization options.
  3. jquery.min.js (make sure it loads and path is correct)
  4. owl.carousel.min.js (from /dist folder, make sure it loads)
  5. your own <script>, containing the call to initialization.

Important aspects:

  • 5, 6 and 7 must be loaded in this order. They could be placed before 3 and 4, or even included in the <head> tag. However, if you place them inside <body>, below the fold, your page will seem to load faster. In effect, it will load exactly the same, but the visible elements rendered when you load the page will load after 5,6 and 7 are loaded, so it will appear to load slower.
  • if you load 1 and 2 inside <body>, using <style> tags, which is not recommended and if they are placed after the carousel markup, it is possible some browsers will render a quick un-styled version of your carousel, before parsing the CSS. That's why it is better to load them in <head>.
  • Place type="text/javascript" on all your JavaScript <script> tags (jQuery is a JavaScript library).

Working example:

<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="https://i.picsum.photos/id/237/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/238/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/239/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/240/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/241/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/242/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/243/400/300.jpg"></div>
  <div><img src="https://i.picsum.photos/id/244/400/300.jpg"></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>

Upvotes: 18

Related Questions