How to disable owl-carousel on desktop and enable on mobile device
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
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>jquery html css owl-carousel
add a comment |
0
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>jquery html css owl-carousel
add a comment |
0
0
0
1
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>jquery html css owl-carousel
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>$(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>$(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>jquery html css owl-carousel
jquery html css owl-carousel
asked Dec 25 '17 at 11:50
user6930268
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
7
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>answered Dec 25 '17 at 12:19
yinkenyinken
25329
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
I 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'
– yinken
Dec 25 '17 at 13:16
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
|
show 3 more comments
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();
});
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
add a comment |
0
You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.
function postsCarousel() {
var checkWidth = $(window).width();
var owlPost = $("#latest-posts .posts-wrapper");
if (checkWidth > 767) {
if (typeof owlPost.data('owl.carousel') != 'undefined') {
owlPost.data('owl.carousel').destroy();
}
owlPost.removeClass('owl-carousel');
} else if (checkWidth < 768) {
owlPost.addClass('owl-carousel');
owlPost.owlCarousel({
items: 1,
slideSpeed: 500,
animateOut: 'fadeOut',
touchDrag: false,
mouseDrag: false,
autoplay: true,
autoplaySpeed: 8000,
autoplayTimeout: 8000,
dots: true,
loop: true
});
}
}
postsCarousel();
$(window).resize(postsCarousel);
answered Feb 8 '18 at 14:26
RashedRashed
12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47968333%2fhow-to-disable-owl-carousel-on-desktop-and-enable-on-mobile-device%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
7
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>answered Dec 25 '17 at 12:19
yinkenyinken
25329
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
I 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'
– yinken
Dec 25 '17 at 13:16
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
|
show 3 more comments
7
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>answered Dec 25 '17 at 12:19
yinkenyinken
25329
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
I 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'
– yinken
Dec 25 '17 at 13:16
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
|
show 3 more comments
7
7
7
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>answered Dec 25 '17 at 12:19
yinkenyinken
25329
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>$(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>$(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>answered Dec 25 '17 at 12:19
yinkenyinken
25329
edited Dec 26 '17 at 12:10
answered Dec 25 '17 at 12:19
yinkenyinken
25329
answered Dec 25 '17 at 12:19
yinkenyinken
25329
answered Dec 25 '17 at 12:19
yinkenyinken
25329
25329
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
I 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'
– yinken
Dec 25 '17 at 13:16
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
|
show 3 more comments
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
I 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'
– yinken
Dec 25 '17 at 13:16
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
It will be good for me if you share the snippet with an example.
– user6930268
Dec 25 '17 at 12:40
I 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'
– yinken
Dec 25 '17 at 13:16
I 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'
– yinken
Dec 25 '17 at 13:16
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop
– user6930268
Dec 25 '17 at 13:24
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry, there was an error in there... Should work now.
– yinken
Dec 25 '17 at 13:53
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device
– user6930268
Dec 26 '17 at 4:45
|
show 3 more comments
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();
});
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
add a comment |
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();
});
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
add a comment |
2
2
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();
});
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
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();
});
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
edited Nov 17 '18 at 11:23
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
answered Nov 17 '18 at 6:55
Jomal JohnyJomal Johny
32028
32028
add a comment |
add a comment |
0
You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.
function postsCarousel() {
var checkWidth = $(window).width();
var owlPost = $("#latest-posts .posts-wrapper");
if (checkWidth > 767) {
if (typeof owlPost.data('owl.carousel') != 'undefined') {
owlPost.data('owl.carousel').destroy();
}
owlPost.removeClass('owl-carousel');
} else if (checkWidth < 768) {
owlPost.addClass('owl-carousel');
owlPost.owlCarousel({
items: 1,
slideSpeed: 500,
animateOut: 'fadeOut',
touchDrag: false,
mouseDrag: false,
autoplay: true,
autoplaySpeed: 8000,
autoplayTimeout: 8000,
dots: true,
loop: true
});
}
}
postsCarousel();
$(window).resize(postsCarousel);
answered Feb 8 '18 at 14:26
RashedRashed
12
add a comment |
0
You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.
function postsCarousel() {
var checkWidth = $(window).width();
var owlPost = $("#latest-posts .posts-wrapper");
if (checkWidth > 767) {
if (typeof owlPost.data('owl.carousel') != 'undefined') {
owlPost.data('owl.carousel').destroy();
}
owlPost.removeClass('owl-carousel');
} else if (checkWidth < 768) {
owlPost.addClass('owl-carousel');
owlPost.owlCarousel({
items: 1,
slideSpeed: 500,
animateOut: 'fadeOut',
touchDrag: false,
mouseDrag: false,
autoplay: true,
autoplaySpeed: 8000,
autoplayTimeout: 8000,
dots: true,
loop: true
});
}
}
postsCarousel();
$(window).resize(postsCarousel);
answered Feb 8 '18 at 14:26
RashedRashed
12
add a comment |
0
0
0
You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.
function postsCarousel() {
var checkWidth = $(window).width();
var owlPost = $("#latest-posts .posts-wrapper");
if (checkWidth > 767) {
if (typeof owlPost.data('owl.carousel') != 'undefined') {
owlPost.data('owl.carousel').destroy();
}
owlPost.removeClass('owl-carousel');
} else if (checkWidth < 768) {
owlPost.addClass('owl-carousel');
owlPost.owlCarousel({
items: 1,
slideSpeed: 500,
animateOut: 'fadeOut',
touchDrag: false,
mouseDrag: false,
autoplay: true,
autoplaySpeed: 8000,
autoplayTimeout: 8000,
dots: true,
loop: true
});
}
}
postsCarousel();
$(window).resize(postsCarousel);
answered Feb 8 '18 at 14:26
RashedRashed
12
You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.
function postsCarousel() {
var checkWidth = $(window).width();
var owlPost = $("#latest-posts .posts-wrapper");
if (checkWidth > 767) {
if (typeof owlPost.data('owl.carousel') != 'undefined') {
owlPost.data('owl.carousel').destroy();
}
owlPost.removeClass('owl-carousel');
} else if (checkWidth < 768) {
owlPost.addClass('owl-carousel');
owlPost.owlCarousel({
items: 1,
slideSpeed: 500,
animateOut: 'fadeOut',
touchDrag: false,
mouseDrag: false,
autoplay: true,
autoplaySpeed: 8000,
autoplayTimeout: 8000,
dots: true,
loop: true
});
}
}
postsCarousel();
$(window).resize(postsCarousel);
answered Feb 8 '18 at 14:26
RashedRashed
12
answered Feb 8 '18 at 14:26
RashedRashed
12
answered Feb 8 '18 at 14:26
RashedRashed
12
answered Feb 8 '18 at 14:26
RashedRashed
12
12
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47968333%2fhow-to-disable-owl-carousel-on-desktop-and-enable-on-mobile-device%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
