JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<div class="owl-carousel">      
          <div class="item">
              <h2>1</h2>
            </div><div class="item">
              <h2>2</h2>
            </div><div class="item">
              <h2>3</h2>
            </div><div class="item">
              <h2>4</h2>
            </div><div class="item">
              <h2>5</h2>
            </div><div class="item">
              <h2>6</h2>
            </div><div class="item">
              <h2>7</h2>
            </div><div class="item">
              <h2>8</h2>
            </div><div class="item">
              <h2>9 of options</h2>
            </div><div class="item">
              <h2>10</h2>
            </div><div class="item">
              <h2>11</h2>
            </div>
</div><br><br>

<span class="info0-before"></span><br>
<span class="info1-before"></span><br>
<span class="info2-before"></span><br>
<span class="info3-before"></span><br>
<span class="info4a-before"></span><br>
<span class="info4b-before"></span><br><br>

<span class="info0-after"></span><br>
<span class="info1-after"></span><br>
<span class="info2-after"></span><br>
<span class="info3-after"></span><br>
<span class="info4-after"></span><br><br>

CSS

.owl-item:nth-child(2n+1){
    background:red;
}
.owl-item:nth-child(2n+2){
    background:blue;
}
.owl-item{
    color: yellow;
}

JavaScript

var owl = $('.owl-carousel');
owl.owlCarousel({
    margin: 0,
    loop: true,
    slideBy: 1,
    items: 1,
    nav: true,
    info: true,
    autoplay:true
})
var next = null, enteredBefore = false, p = 0, i = 0
owl.on('change.owl.carousel', function(e) {
        //with next/prev button it enter 4 times with drag 2 times
        if(e.property.name == "position")
             $(".info4a-before").text("triggered position (e.property.name): "+(p++));
        if(e.property.name == "items")
             $(".info4b-before").text("triggered items (e.property.name): "+(i++));
        
        if(e.property.name != "position") return
        
        //check if it moves and in what direction
        next = e.item.index < e.property.value;
    
        $(".info1-before").text("before-old item (e.item.index): "+e.item.index);
        $(".info2-before").text("before-actual item (e.property.value): "+e.property.value);
        
        //check the end of carousel on loop true
        //check max item with e.item.count-(slideBy+1) value
        if(e.item.index == 1 && e.property.value == e.item.count ) 
            next = false;
        if(e.item.index == e.item.count && e.property.value == 1)
            next = true;
        
        //action that you want trigger on next/prev button and on drag
        if (next) {
            $(".info3-before").text("next-before");
        } else if (next != null ){
            $(".info3-before").text("prev-before");
        }
})



owl.on('changed.owl.carousel', function(e) {
        //with next/prev button it enter two times
        if(e.property.name != "position") return
    
        
        $(".info1-after").text("after-old item: "+e.item.index);
        $(".info2-after").text("after-actual item: "+e.property.value);
        
        //action that you want trigger on next/prev button and on drag
        if (next) {
            $(".info3-after").text("next-after");
        } else if (next != null ) {
           ...