CODEWITHSUNDEEP
javascripthtmlcssowl-carousel-2
Muhammad Abdullah Khan
Muhammad Abdullah Khan

Reputation: 80

OwlCarousel2 shows blank slides while every other HTML tags are showing up fine

I have been trying to fix it out but haven't got any solution that may help. I have been following the official installation docs. My Owlcarousel2 version is 2.3.4, I have tried other versions, all are same. OwlCarousel old is working fine but Owlcarousel2 is not. here is my HTML

<html>
<head>

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

<script>

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

</script>

<style>#owl-demo .item {
    border:solid;
  margin: 3px;
}
</style>

</head>

</html>
<body>
    <h1>Owl</h1>
<div class="owl-carousel owl-theme">
    <div class="item"><img src="images/FEATURE1.PNG"></div>
    <div class="item"><img src="images/FEATURE2.PNG"></div>
    <div class="item"><img src="images/FEATURE3.PNG"></div>
    <div class="item"><img src="images/FEATURE4.PNG"></div>
    <div class="item"><img src="images/FEATURE5.PNG"></div>
    <div class="item"><img src="images/FEATURE6.PNG"></div>

</div>

<h1>Owl</h1>

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

<h1>Owl</h1>are showing up but data of class .owl-carousel is invisible

Upvotes: 1

Views: 2727

Answers (4)

Amlana
Amlana

Reputation: 11

Try by removing the line space

Upvotes: 0

Anand
Anand

Reputation: 207

Everything is fine insted of placement of scripts. You must follow this sequence. 1: jquery 2: owl.carousel.js 3: Then call the owlcarousal

    <html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link href="owl/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
<link href="owl/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>

<style>

.item{
border:solid;
}
</style>
</head>

</html>
<body style="overflow: hidden;">
    <h1>Owl</h1>
    <hr/>

<div class="row" >
<div class="owl-carousel col-6" style="">
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>

</div>
</div>

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

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

</script>

<hr/>    
<h1>Owl</h1>

</body>

Upvotes: 1

Mohcin Bounouara
Mohcin Bounouara

Reputation: 623

I think you have put a double$('.owl-carousel').owlCarousel({..}).

Use this instead:

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

</script>

Upvotes: 1

Muhammad Abdullah Khan
Muhammad Abdullah Khan

Reputation: 80

I finally sort out the main reason. It was just the placing order of script. it is clear that we should use jquery.js and owl-carousel.js before your javascript to initialize your carousel.

<html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link href="owl/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
<link href="owl/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>

<style>

.item{
border:solid;
}
</style>
</head>

</html>
<body style="overflow: hidden;">
    <h1>Owl</h1>
    <hr/>


<div class="row" >
<div class="owl-carousel col-6" style="">
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>

</div>
</div>

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

<script>

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

</script>

<hr/>    
<h1>Owl</h1>

</body>

Upvotes: 0

Related Questions