Owl Carousel2

Basic demo

by tarantadakadin101

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>


<div class="owl-carousel owl-theme">
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>

<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>

<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
</div>



<div class="owl-carousel owl-theme">
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img src="https://i.imgur.com/iyp13K1.jpg"></div>
<div class="item"><img...

CSS

.owl-carousel {
  position: relative;
  width: 100%;
  margin-top: 65px;
}
.owl-carousel .owl-stage-outer {
  overflow: visible;
}
.owl-carousel .item {
    position: relative;
    height: 9%;
    width: auto;
    background: #4DC7A0;
    z-index: 0;
}

.owl-nav button {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
  z-index: 0;
  color: red;
  background: rgb(255 1 1 / 40%)!important;
  display: block;
  margin: 0!important;
}
.owl-nav button span {
  color: white!important;
  font-size: 51px;
}
.owl-nav .owl-next {
  right: 0;
    position: absolute;
  z-index: 0;

}
.owl-nav .owl-prev {
  left: 0;
    position: absolute;
  z-index: 0;
}
.owl-carousel .owl-item:hover {
  	transform: scale(1.4);
    position: relative;
    z-index: 2;
}
.owl-carousel .owl-item:hover >

JavaScript

var carousel = $(".owl-carousel");
carousel.owlCarousel({
    loop:true,
    margin:10,
    stagePadding:50,
    nav:true,
    dots:false,
          slideBy: 5,
    responsive:{
        0:{
            slideBy: 1,
            items:1
        },
        600:{       
        		slideBy: 3,
            items:3
        },
        1000:{
            slideBy: 5,
            items:5
        }
    }
})


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

    function checkClasses(){
        var total = $('.owl-carousel .owl-stage .owl-item.active').length; // nested class from activator class

        $('.owl-carousel .owl-stage .owl-item').removeClass('firstActiveItem lastActiveItem'); // nested class from activator class and remove first and last class if already added.

        $('.owl-carousel .owl-stage .owl-item.active').each(function(index){ // nested class from activator class
        
            if (index === 0) {
                // this is the first one
                $(this).addClass('firstActiveItem'); // add class in first item
            }
            if (index === total - 1 && total>1) {
                // this is the last one
                $(this).addClass('lastActiveItem'); // add class in last item
            }
        });
    }