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

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!