Skewed Owl Carousel Transition

by Manikandan Kalaivanan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<div class="owl-carousel">
  <div class="item"><img src="https://place-hold.it/500x350/666?text=Item 1" alt=""></div>
  <div class="item"><img src="https://place-hold.it/500x350/ccc?text=Item 2" alt=""></div>
  <div class="item"><img src="https://place-hold.it/500x350/ddd?text=Item 3" alt=""></div>
  <div class="item"><img src="https://place-hold.it/500x350/666?text=Item 4" alt=""></div>
  <div class="item"><img src="https://place-hold.it/500x350/fdf?text=Item 5" alt=""></div>
</div>

SCSS

.owl-carousel {

  .item {
    transform: skewX(0deg);
    transition: transform .10s ease-in-out;

    &.rtl {
      transform: skewX(10deg);
    }

    &.ltr {
      transform: skewX(-10deg);
    }
  }

  .owl-nav {

    position: absolute;
    width: 100%;


    [class^="owl-"] {
      position: absolute;

      span {
        font-size: 35px;
      }
      
      &.disabled {
        color: red;
      }

    }

    .owl-prev {
      left: 15px;
    }

    .owl-next {
      right: 15px;
    }

  }
}

JavaScript

$('.owl-carousel').owlCarousel({
	item: 3,
	margin: 15,
  nav: true,
  dots: false
});


$('body').on('click', '.owl-nav [class^="owl-"]', function() {
  btnClass = $(this)[0].className;
  btnClass_new = btnClass.replace(' disabled', '')
	console.log(btnClass);
 /*  if(btnClass.includes('disabled')){
    return;
  } */
  if(btnClass_new === 'owl-next') {
  	$('.item').addClass('ltr');
  }else {
  	$('.item').addClass('rtl');
  }
  
  
  
  
  setTimeout(function() {
  	$('.item').removeClass('ltr rtl');
  }, 250);
})