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 underneath one another.

Is this possible? I'm aware you can tweak Owl Carousel to show a certain number of images on screen at certain breakpoints. But I would like to be able to turn it off completely, removing all the divs etc.

Here's a pen of what i'm currently working with at the moment: http://codepen.io/abbasinho/pen/razXdN

HTML:

<div id="carousel">
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);">
  </div>
  <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);">
  </div>
</div>

CSS:

#carousel {
  width: 100%;
  height: 500px;
}

.carousel-item {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

jQuery:

$("#carousel").owlCarousel({
      navigation : true,
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem: true
});

Any help is gratefully received as ever!

Please be sure to read the tag descriptions. This is not about the Web Ontology Language ([tag:owl]), but about Owl Carousel ([tag:owl-carousel]). — Joshua Taylor, Jan 31 '15 at 13:03
Hi, I played around with the code pen sample, and I was able add those picture elements stacked for a mobile device. The mobile device works if you make the browser width smaller than 501 px wide. I used those CSS3 media query files @media screen and (max-width: 500px) http://www.w3schools.com/cssref/css3_pr_mediaquery.asp Code pen http://codepen.io/jyrkim/pen/NPvQOe However, I'm new to Owl Carousel, and when I resize the browser, the buttons still appear at a mobile phone width. But I hope those CSS3 media query files are useful for you. — jyrkim, Jan 31 '15 at 13:53

score 23 · Answer 1 · answered Oct 18 '15 at 14:41

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:

Check the viewport width before call the plugin.
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.
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;
}

hi i have a problem when you are in mobile size and you want to resize the page up to 854px an error " TypeError: this.e is null " occur and numbers of this error increase when you resize the window further more. can you help me to fix this error ? — nyn05, Jun 11 '16 at 07:08
@hosseinghaem Hi, could you please provide a link with a test case? — mcmimik, Jun 12 '16 at 10:22

score 8 · Answer 2 · answered Aug 17 '16 at 05:39

8

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

answered Aug 17 '16 at 05:39

Mark Williams

1,119
10
7

The only problem here however, is that the carousel will keep running the JavaScript functions therefore not disabling it. You will only not be able to see them. – Idris Dopico Peña Dec 11 '17 at 09:30
This was enough for me. – Diana May 01 '20 at 23:06

Roy van Wensen · Answer 3 · 2018-04-05T18:21:43.010

8

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/

edited Apr 05 '18 at 18:21

answered Apr 05 '18 at 11:43

Roy van Wensen

580
1
5
13

Could you add a bit of context/explanations? As it is right now, it is not very helpful for users not having experience in JS and/or Owl Carousel. – SaschaM78 Apr 05 '18 at 13:06
@SaschaM78 sure :-) i placed a working Fiddle hope this helps? – Roy van Wensen Apr 05 '18 at 18:25
That's good but what I meant is to add some description about what your code does. Code-only answers are often seen as "bad answers" as they do not offer an explanation about how and why they solve the mentioned problems the original asker had. – SaschaM78 Apr 06 '18 at 09:50

score 4 · Answer 4 · edited May 23 '17 at 10:29

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

score 0 · Answer 5 · answered Jan 31 '15 at 12:39

0

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.

answered Jan 31 '15 at 12:39

Gavin Simpson

2,766
3
30
39

Hey thanks for the answer... would that solution not turn the whole gallery off? – abbas_arezoo Jan 31 '15 at 12:42
It will just hide it, nothing more. when you remove the class it will simply pop up on screen again. – Gavin Simpson Jan 31 '15 at 12:43
I see, I'm wanting to keep the gallery visible on smaller devices. I just want to disable the carousel functionality. I was assuming you could add something to JS to simply disable Owl Carousel off at a particular window width and below. – abbas_arezoo Jan 31 '15 at 12:45
2

Aha... ok different story, and certainly a different answer. Possible then rather use the jquery to remove the class 'carousel-class', then re-add it. Maybe just add a different name class while disabled to make it ease ti re-add the class. I hope that makes sense. – Gavin Simpson Jan 31 '15 at 12:52

score 0 · Answer 6 · answered Oct 01 '22 at 11:32

<!-- Working Example -->
<div class="owl-carousel owl-theme services-carousel">
    <owl-item></owl-item>
    ...
</div>    

function servicesSlider() {
    let windowWidth = jQuery(window).width();
    let servicesSlider = jQuery(".services-carousel");
            
    if (windowWidth < 992) {
        jQuery(servicesSlider).owlCarousel({
            dots: true,
            items: 1,                       
        });                 
    }
    else {
        jQuery(servicesSlider).owlCarousel('destroy');
    }
}       
servicesSlider();
jQuery(window).resize(function () { 
    servicesSlider();
});

Disabling Owl Carousel at a specific viewport width

6 Answers6

Linked