如何制作弯曲的 dial/wheel 旋转木马？

Question

我想做这样的事情。旋转木马物品的容器是弯曲的，如果物品不在焦点上，物品将向下移动。描述也应该根据重点项目而改变。轮播可能无法自动播放。

但这是我能想到的最接近的。我也在互联网上进行了大量搜索，但我认为我的关键字可能不合适（关键字：dial/wheel carousel）。知道如何实现与 GIF 中相同的效果吗？谢谢。

$(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>

Answer 1

你已经非常接近完成它了。

这是 OwlCarousel 的文档，您需要添加 "SlideTransition" 选项。 https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

您还可以添加一个“transition: transform 0.4s”，在其中调用您的 scale() 就像我所做的那样，以便在您的“transform: scale()”上实现更平滑的过渡。（根据需要调整时间）。

通过这两个更改，您应该会达到预期的结果。

$(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>

如何制作弯曲的 dial/wheel 旋转木马？

How to make a curved dial/wheel carousel?

css

jquery

curve

carousel

owl-carousel-2