JSFiddle - React, Tailwind, and code Playground

carousel2 centered focus middle garphic

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div id="demos">
	<div class="loop owl-carousel">
		<div class="item"><h4>1</h4></div>
		<div class="item"><h4>2</h4></div>
		<div class="item"><h4>3</h4></div>
		<div class="item"><h4>4</h4></div>
		<div class="item"><h4>5</h4></div>
		<div class="item"><h4>6</h4></div>
		<div class="item"><h4>7</h4></div>
		<div class="item"><h4>8</h4></div>
		<div class="item"><h4>9</h4></div>
		<div class="item"><h4>10</h4></div>
		<div class="item"><h4>11</h4></div>
		<div class="item"><h4>12</h4></div>
	</div>
</div>

CSS

.owl-carousel .owl-item.big div {background:blue !important;height:150px}
.owl-carousel .owl-item.medium div {background:pink !important;height:100px}
.owl-item{background:#222222;padding:0;}

JavaScript

$(function(){
    $('.loop').owlCarousel({
        center: true,
        items:3, // one to allow animate
        autoplayTimeout: 1900,
        slideSpeed: 300,
        loop:true,
        margin:1,
        autoHeight:false,
        autoplay:true,
       
        animateIn: 'fadeInDown',
          animateOut: 'slideOutUp',
                    
    });
    
    $('.loop').on('translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
    });
});