Как обработать некоторые события, чтоб owl-carousel смотрелась корректно?

var owl = $('.slider'); 
owl.owlCarousel({ 
	items: 1, 
	margin: 0, 
  loop: true, // Если поменять на false, то вроде бы всё ок 
  autoWidth:true, 
  dots: false, 
  nav: true, 
}); 
 
// При клике дается активный класс заголовкам  
$('.nav span').click(function() { 
	$('.nav span').removeClass('active'); 
  $(this).addClass('active'); 
}); 
 
// Переходит к слайдеру в соответствии с позицией 
$('.nav span:nth-child(1)').click(function() { 
  owl.trigger('to.owl.carousel', [0, 300]); 
}); 
$('.nav span:nth-child(2)').click(function() { 
  owl.trigger('to.owl.carousel', [1, 300]); 
}); 
$('.nav span:nth-child(3)').click(function() { 
  owl.trigger('to.owl.carousel', [2, 300]); 
}); 
 
// При драге меняем класс 
owl.on('dragged.owl.carousel', function(event) { 
	var in_owl = event.item.index; 
	 if (in_owl == 0) { 
   		$('.nav span').removeClass('active'); 
   		$('.nav span:nth-child(1)').addClass('active'); 
   } else if (in_owl == 1) { 
   		$('.nav span').removeClass('active'); 
   		$('.nav span:nth-child(2)').addClass('active'); 
   } else { 
   		$('.nav span').removeClass('active'); 
   		$('.nav span:nth-child(3)').addClass('active'); 
   } 
}); 
 
// Клики на стрелки 
$(".owl-prev, .owl-next").click(function(){    
    $a = $(".nav span.active"); 
    $x = $(this).hasClass('prev') ? $a.prev() : $a.next();  
  
    if($x.length > 0){       
      $x.add($a).toggleClass('active');       
    } 
});

.nav .active { 
  color: blue; 
} 
 
.nav span { 
  cursor: pointer; 
} 
 
.slider { 
  max-width: 300px; 
} 
 
.slider .slide-item { 
  margin-left: -50px; 
}

<script 
  src="https://code.jquery.com/jquery-3.2.1.min.js" 
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
  crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/> 
 
 
<div class="nav"> 
  <span class="active">слайд 1</span> 
  <span>слайд 2</span> 
  <span>слайд 3</span> 
</div> 
 
<div class="slider owl-theme owl-carousel"> 
  <div class="slide-item"> 
    <img src="https://www.macrobusiness.com.au/wp-content/uploads/2011/07/homer-doh-300x300.png" alt="image"> 
  </div> 
  <div class="slide-item"> 
    <img src="https://vokrug.tv/pic/news/6/7/e/b/rsz300x300_67eb42057311db5650ba705e21178207.jpeg" alt="image"> 
  </div> 
  <div class="slide-item"> 
    <img src="http://likegif.com/wp-content/uploads/2012/10/homer-gif-12.gif" alt="image"> 
  </div> 
</div>