In desktop version its working fine then mobile device it shows same number of item like desktop.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:false,
responsiveClass:true,
autoplay:true,
autoplayTimeout:2500,
responsive:{
0:{
items:1,
},
600:{
items:2
},
1000:{
items:4
}
}
})
CodePudding user response:
Just in case, maybe you did not include responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Seems to be working fine with the code you added, maybe some css that is overwriting this somehow?
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:false,
responsiveClass:true,
autoplay:true,
autoplayTimeout:2500,
responsive:{
0:{
items:1,
},
600:{
items:2
},
1000:{
items:4
}
}
});
.owl-carousel {
margin: 2rem 0;
}
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
.owl-carousel .item h4 {
color: #FFF;
font-weight: 400;
margin-top: 0rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo nk7go3BtSuK9kfa/s a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>