Disabling Owl Carousel at a specific viewport width

Question

I\'m currently using Owl Carousel to show a gallery on desktop/laptop sized devices. However on smaller devices I\'d like to disable the plugin and show each image stacked under

Answer 1

Simple, use jquery. Add a class to the carousel's container div, for example "<div id="carousel class='is_hidden'>" with some css for example ".is_hidden{display:none;}". Then use jquery to remove the class, or add the class, depending on window width.

Answer 2

function owlInitialize() {
   if ($(window).width() < 1024) {
      $('#carousel').owlCarousel();
   }else{
      $('#carousel').owlCarousel('destroy');
   }
}

$(document).ready(function(e) {
   owlInitialize();
});

$(window).resize(function() {
   owlInitialize();
});

Working Fiddle: https://jsfiddle.net/j6qk4pq8/187/

Answer 3

mcmimik's answer is correct, but I had to make one change for it to work for me.

In the function:

    $(window).resize(function () {
    if ($(window).width() < 641) {
        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();
        }
    }
});

Swap outowl.addClass('off').trigger('destroy.owl.carousel'); for owl.addClass('off').data("owlCarousel").destroy();:

    $(window).resize(function () {
    if ($(window).width() < 641) {
        if ($('.owl-carousel').hasClass('off')) {
            var owlActive = owl.owlCarousel(owlOptions);
            owl.removeClass('off');
        }
    } else {
        if (!$('.owl-carousel').hasClass('off')) {
            owl.addClass('off').data("owlCarousel").destroy();
            owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
        }
    }
});

Answer 4

I had to disable plugin if the screen width is bigger than 854px. Sure, you can change the code to fit your needs. Here is my solution:

1. Check the viewport width before call the plugin.
2. If width is good to call the plugin, call the plugin. Else add the 'off' class to show as if the plugin has already been called and destroyed.
3. When resizing:
   3.1. If width is good to call the plugin AND the plugin hasn't been called yet or it was destroyed earlier (I use the 'off' class to know it), THEN call the plugin.
   3.2. if width isn't good to call the plugin AND the plugin is active now, THEN destroy it with Owl's trigger event destroy.owl.carousel and remove the unnecessary wrapper element 'owl-stage-outer' after it.

$(function() {
    var owl = $('.owl-carousel'),
        owlOptions = {
            loop: false,
            margin: 10,
            responsive: {
                0: {
                    items: 2
                }
            }
        };

    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();
            }
        }
    });
});

And a bit of CSS to show disabled Owl element:

.owl-carousel.off {
    display: block;
}

Answer 5

Easier to use a CSS based solution

@media screen and (max-width: 992px) {
  .owl-item.cloned{
    display: none !important;
  }
  .owl-stage{
    transform:none !important;
    transition: none !important;
    width: auto !important;
  }
  .owl-item{
    width: auto !important;
  }
}