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

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!