Owl Carousel Destroy on desktop and Initialize on mobile

main.js

function postsCarousel() {
  var checkWidth = $(window).width();
  var owlPost = $("#latest-posts .posts-wrapper");
  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
    });
  }
}

postsCarousel();
$(window).resize(postsCarousel);	

Thanks man! finally found something useful)

@matt5346. Glad it helped! Happy Coding!

holy finally that works thank you so much kirandhash!!!!! i love you.

holy finally that works thank you so much kirandhash!!!!! i love you.

You are welcome @shidono.

Works very well for me thank youuu! 💯

Works very well for me thank youuu! 💯

@laurianne29 Glad it helped! You are welcome!

This is so great thank you! If anyone is using the owl-theme you will need to add the class ".owl-theme" also
owlPost.removeClass('owl-carousel owl-theme');
owlPost.addClass('owl-carousel owl-theme');

Works for me. I was experiencing some rather odd styling when the slider was being destroyed and reinitialised. For whatever reason it would fail to destroy itself after being reinitialised while at mobile size, despite having it in a window resize function. Very strange but this has solved that problem for me

Overcomplication

function initOwl() {
    if (typeof jQuery == 'function') {
        jQuery('.subset-carousel').each(function () {
            var el = jQuery(this);
            if (jQuery(window).width() <= 767) {
                jQuery(this).owlCarousel({
                    items: 2,
                    stagePadding: 27,
                    loop: true
                });
            } else {
                jQuery(el).owlCarousel('destroy');
            }
        })
    }
}

window.addEventListener('DOMContentLoaded', function () {
    initOwl();
});

window.addEventListener('resize', function () {
    initOwl();
});

Vanila js resolution is also similar and you can change the addEventListeners to jQuery code.. Also just add owl-carousel class on the top level div. This is also code for multiple carousels on same page.

This is so great thank you! If anyone is using the owl-theme you will need to add the class ".owl-theme" also owlPost.removeClass('owl-carousel owl-theme'); owlPost.addClass('owl-carousel owl-theme');

@viciouskitten Glad it helped! Thanks for sharing the tips on adding "owl-theme"

Works for me. I was experiencing some rather odd styling when the slider was being destroyed and reinitialised. For whatever reason it would fail to destroy itself after being reinitialised while at mobile size, despite having it in a window resize function. Very strange but this has solved that problem for me

@andyiwest Glad it helped!