How to disable owl-carousel on desktop and enable on mobile device
Solution 1
Right now, it looks like you are loading the carousel as soon as the document is ready, then looking for the device width (e.g. checking for a mobile device). Instead, wouldn't it make sense to first determine the device width, then apply the owlCarousel if the width is below a certain threshold?
Something like this:
$(document).ready(function() {
if ( $(window).width() < 854 ) {
startCarousel();
} else {
$('.owl-carousel').addClass('off');
}
});
$(window).resize(function() {
if ( $(window).width() < 854 ) {
startCarousel();
} else {
stopCarousel();
}
});
function startCarousel(){
$("#owl_about_main_slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 500,
margin:10,
paginationSpeed : 400,
autoplay:true,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
loop:true,
nav:true,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
});
}
function stopCarousel() {
var owl = $('.owl-carousel');
owl.trigger('destroy.owl.carousel');
owl.addClass('off');
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
left: 0;
display: flex;
}
body .owl-next{
right: 0;
display: flex;
}
body .owl-prev i, body .owl-next i{
margin: auto;
}
#owl_about_main_slider div h2{
text-align: center;
}
.owl-carousel.off {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div id="owl_about_main_slider" class="owl-carousel">
<div><h2>This is First Slider</h2></div>
<div><h2>This is Second Slider</h2></div>
<div><h2>This is Third Slider</h2></div>
<div><h2>This is Fourth Slider </h2></div>
</div>
Solution 2
You can Easily Destroy Owl Carousel On Desktop and Enable Owl Carousel under the screen size 1280 during the responsive checking with screen resolution.
function owlInitialize() {
if ($(window).width() < 1280) {
$('.prdt_category').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
margin: 5,
nav: true,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
dots: false,
responsive:{
0:{
items:3,
},
480:{
items:4,
},
640:{
items:5,
},
1000:{
items:8,
}
}
});
}else{
$('.owl-carousel').owlCarousel('destroy');
$('.prdt_category').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});
Related videos on Youtube
Admin
Updated on November 18, 2020Comments
-
Admin over 3 years
I am using the owl-carousel plugin(https://owlcarousel2.github.io/OwlCarousel2/). I want to disable the owl-carousel on the desktop so that my all content will display in a line and enable on the mobile device so my content will slide one by one. I tried some code but it is not working.
Would you help me out in this?
$(document).ready(function() { $("#owl_about_main_slider").owlCarousel({ navigation : true, // Show next and prev buttons slideSpeed : 500, margin:10, paginationSpeed : 400, autoplay:true, items : 1, itemsDesktop : false, itemsDesktopSmall : false, itemsTablet: false, itemsMobile : false, loop:true, nav:true, navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"] }); }); $(function() { var owl = $('.owl-carousel'), owlOptions = { loop: false, margin: 10, responsive: { 0: { items: 1 } } }; if ( $(window).width() < 854 ) { var owlActive = owl.owlCarousel(owlOptions); } else { owl.addClass('off'); } $(window).resize(function() { if ( $(window).width() < 854 ) { if ( $('.owl-carousel').hasClass('off') ) { var owlActive = owl.owlCarousel(owlOptions); owl.removeClass('off'); } } else { if ( !$('.owl-carousel').hasClass('off') ) { owl.addClass('off').trigger('destroy.owl.carousel'); owl.find('.owl-stage-outer').children(':eq(0)').unwrap(); } } }); });
html,body{ margin: 0; padding: 0; height: 100%; } body .owl-nav div{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); border:1px solid #000; width: 40px; height: 40px; border-radius: 50%; } body .owl-prev{ left: 0; display: flex; } body .owl-next{ right: 0; display: flex; } body .owl-prev i, body .owl-next i{ margin: auto; } #owl_about_main_slider div h2{ text-align: center; } .owl-carousel.off { display: block; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> <div id="owl_about_main_slider" class="owl-carousel"> <div><h2>This is First Slider</h2></div> <div><h2>This is Second Slider</h2></div> <div><h2>This is Third Slider</h2></div> <div><h2>This is Fourth Slider </h2></div> </div>
-
Admin over 6 yearsIt will be good for me if you share the snippet with an example.
-
yinken over 6 yearsI edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'
-
Admin over 6 yearsThanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
-
yinken over 6 yearsSorry, there was an error in there... Should work now.
-
Admin over 6 yearsSorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
-
yinken over 6 yearsPlease see this fiddle: jsfiddle.net/yinken/L6q7kxtv . It should be working just fine
-
Admin over 6 yearsYes, Your Jsfiddle is working for me. Please update this answer.
-
SLoN1ck about 6 yearsThanks mate, really helped me to save some time :)