- This topic is empty.
-
AuthorPosts
-
December 25, 2017 at 11:50 am #10203user6930268Participant
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>
December 25, 2017 at 12:19 pm #10206yinkenParticipantRight 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>
February 8, 2018 at 2:26 am #10204rashedParticipantYou 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);
November 17, 2018 at 6:55 am #10205jomal-johnyParticipantYou 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(); });
-
AuthorPosts
- You must be logged in to reply to this topic.