Owl carousel custom example

Add HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="owl-carousel">
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2022/02/23/18/11/drink-7031154_960_720.jpg" alt="">
            </div>
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2021/12/21/08/29/owl-6884773_960_720.jpg" alt="">
            </div>
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2022/02/28/04/50/nature-7038455_960_720.jpg" alt="">
            </div>
             <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2022/02/23/18/11/drink-7031154_960_720.jpg" alt="">
            </div>
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2021/12/21/08/29/owl-6884773_960_720.jpg" alt="">
            </div>
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2022/02/28/04/50/nature-7038455_960_720.jpg" alt="">
            </div>
             <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2022/02/23/18/11/drink-7031154_960_720.jpg" alt="">
            </div>
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2021/12/21/08/29/owl-6884773_960_720.jpg" alt="">
            </div>
            <div class="ctbox">
            	<h2>Item</h2>
            	<img src="https://cdn.pixabay.com/photo/2022/02/28/04/50/nature-7038455_960_720.jpg" alt="">
            </div>
</div>
</body>
</html>

Add Owl Carousel CDN links & jQuery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>

Add Own carousel jquery code 

<script type="text/javascript">
	$(document).ready(function(){
  			$(".owl-carousel").owlCarousel({
  				items:1,
  				margin:1,
  				center:true,
  				autoplay: true,
				autoplayTimeout: 2000,
				autoplayHoverPause: false,
  				dots: true,
  				loop:true,  				
  				responsive: {
					0: { items: 1 },
					480: { items: 2 },
					575: { items: 2 },
					768: { items: 2 },
					991: { items: 3 },
					1200: { items: 4 }
					}				
  			});
});
</script>

Add CSS for owl carousel items

<style>
		*{
			 font-family: 'Poppins', sans-serif;
			 box-sizing: border-box;
		}		
		.ctbox{
			padding: 1%;
			display: flex;
			justify-content: center;		
			align-items: center;
			flex-direction: column;		
		}
		.ctbox img{
			width: 120px !important;
			height: 120px;
			border-radius: 100%;		

		}
		.owl-item{
			 transition: all 0.3s ease-in-out;	
			 padding:0.5%;	 
		}

	 .owl-carousel .owl-item .ctbox {
	     opacity: 0.2;
	     transform: scale3d(0.8, 0.8, 0.8);
	     transition: all 0.3s ease-in-out;

	 }

	.owl-carousel .owl-item.active.center .ctbox {
	     opacity: 1;
	     transform: scale3d(1, 1, 1);      
	     background-color: white;
	     border-radius: 4px;      
	 }
</style>
© 2016 - 2022, All Rights are Reserved.