I want to do something like this. Where the container of the carousel items is curved and the items will move downward if they are not on focus. The description should also change according to the focused item. The carousel may not be auto play.
But this is the closest that I can come up with. I also do a lot of searching on the internet but I think my keyword is probably not suitable (keyword: dial/wheel carousel). Any idea how to achieve the same effect as in the GIF? Thank you.
$(function(){
$('.loop').on('initialized.owl.carousel 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-2).addClass('medium');
$('.owl-item').eq(idx+1).addClass('medium');
//$('.owl-item').eq(idx+2).addClass('medium');
});
$('.loop').owlCarousel({
center: true,
items:5,
loop:true,
margin:10,
autoplay: true,
autoPlay: 2000,
stagePadding: 30
})
}); .owl-carousel .owl-item.big div {background:#ac0000 !important;}
.owl-carousel .owl-item.medium div {background:#008000 !important;
transform: scale(0.9);
object-position: 5px 50%;}
.owl-carousel .owl-item div {background:#4B0082 !important;
transform: scale(0.6);
object-position: 0px 80%;}
.owl-carousel.owl-drag .owl-item.center .item {
background: rgb(25, 0, 255) ;
transform: scale(1.5);
}
.owl-stage{
left:-30
}
.owl-carousel .animated {
animation-duration: 5000ms;
animation-fill-mode: both; }<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel='stylesheet' href='http://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css' />
</head>
<div id="demos">
<div class="owl-carousel loop">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>you were pretty close to finish it.
Here's the doc to OwlCarousel, you needed to add the "SlideTransition" option. https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
You could also add a "transition: transform 0.4s" where you call your scale() like I did to have a smoother transition on your "transform: scale()". (adjust time as you see fit).
With these two changes, you should reach the desired result.
$(function(){
$('.loop').on('initialized.owl.carousel 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-2).addClass('medium');
$('.owl-item').eq(idx+1).addClass('medium');
//$('.owl-item').eq(idx+2).addClass('medium');
});
$('.loop').owlCarousel({
center: true,
items:5,
loop:true,
margin:10,
autoplay: true,
autoPlay: 2000,
stagePadding: 30,
slideTransition: "linear"
})
});.owl-carousel .owl-item.big div {background:#ac0000 !important;}
.owl-carousel .owl-item.medium div {background:#008000 !important;
transform: scale(0.9);
object-position: 5px 50%;
transition: transform 0.4s;
}
.owl-carousel .owl-item div {background:#4B0082 !important;
transform: scale(0.6);
object-position: 0px 80%;
transition: transform 0.4s;}
.owl-carousel.owl-drag .owl-item.center .item {
background: rgb(25, 0, 255) ;
transform: scale(1.5);
transition: transform 0.4s;
}
.owl-stage{
left:-30
}
.owl-carousel .animated {
animation-duration: 5000ms;
animation-fill-mode: both; }<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel='stylesheet' href='http://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css' />
</head>
<div id="demos">
<div class="owl-carousel loop">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>