Esta es la forma de añadir una clase Css determinada en el primer slide o item de Owl Carousel 2, para darle unos estilos determinados a este primer elemento, que se actualizara dinámicamente cuando el slider se deslice y cambie el ítem de la primera posición.

Tendrás que prestar atención a que las clases e ids sean los mismos que utiliza tu slider, que puede variar según tu versión exacta o tu elección personal.

<script>
jQuery(document).ready(function($) {

		var carousel = jQuery("#owl1");
			 
		carousel.owlCarousel({
			 items:3,
			 margin:10,
			 autoPlay:true,
			 autoPlayTimeout:2000,
		
		});

		checkClasses();
		
		carousel.on("translated.owl.carousel", function(event) {
			 checkClasses();
		});

		function checkClasses(){
		    
			 var total = $(".owl-stage-outer .owl-stage .owl-item.active").length;
			 
			 $(".owl-stage-outer .owl-stage .owl-item").removeClass("firstActiveItem lastActiveItem");
			 
			 $(".owl-stage-outer .owl-stage .owl-item.active").each(function(index){

				 if (index === 0) {

					 // this is the first one
				 	$(this).addClass("firstActiveItem");
				 
				}
			
				if (index === total - 1 && total>1) {
				 	// this is the last one
				 	$(this).addClass("lastActiveItem");
				}
		
			});
		
		}

});
</script>

Si te ha sido de utilidad ¡deja un comentario! 🙂