Owl carousel random order and remains responsive

I have an Owl Slider which has responsive settings, but once I add the code to randomize the slides, it seems like all the slider settings gets set to default - navigation visibility, responsiveness, etc.

(function ($) {
// Random
  var owl = $('.intro-slider');
  owl.owlCarousel({
      onInitialize : function(element){
          owl.children().sort(function(){
              return Math.round(Math.random()) - 0.5;
          }).each(function(){
              $(this).appendTo(owl);
          });
      },
  });

  
  // Intro SLider
  $('.intro-slider').owlCarousel({


    center: false,
    loop: true,
    stagePadding: 0,
    margin: 0,
    smartSpeed: 1000,
    autoplay: true,
    autoplayHoverPause: false,
    dots: false,
    nav: false,
    responsive: {
      0: {
        items: 3
      },
      768: {
        items: 1
      },
      1000: {
        items: 1
      }
    }

  });
}```