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!
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:
'off'
class to know it), THEN call the plugin.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;
}