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!
if you want : Always show 1 element : you should set width of owl-item is 100% and width of owl-carousel is : 100% . Or always show 2,3,4,5,.... you should set width of owl-item is (100/2) %, (100/3)%, (100/4)%, ... Corresponding with screen will show 4 for desktop, 1 for mobile :you show use breakpoint to set width.
Since you are using OwlCarousel version 1, please check out their documentation. This also says pagination (dots) can be turned off with: pagination: false, The dots: false, is for version 2.
Owl Carousel hasn't been updated in 3 years and is officially deprecated by its maintainers.
Use option dotsContainer, but sometimes it works oddly. Next include this inside of your options object. owl. owlCarousel({ dotsContainer: '#carousel-custom-dots' });
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With