Convert to Owl Carousel at breakpoint
As always, credit to the Author. I am just compiling snippets of code, design ideas, thoughts and ideas, shortcuts and the weird and wonderful in one pllace, so I have to stop looking for it all the time!
function mobileCarousel() {
var checkWidth = $(window).width();
var owlPost = $("#latest-posts .posts-wrapper"); // The Content you are targetting
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
});
}
}
mobileCarouselmobileCarousel();
$(window).resize(mobileCarousel); // Consider removing this, as spending memory on Resizing is only good for people who sit a fiddle with their browser width.