缩放当前幻灯片的轮播

Question

我使用Slick.js制作旋转木马就像在照片上一样，但我失败了（ 有没有人知道如何在照片上制作旋转木马？应该有不同宽度的幻灯片，动画和当前幻灯片必须具有更大的尺寸

我需要做什么：

我现在拥有的内容 - https://jsfiddle.net/fiter92/xL5qezxy/

jQuery(document).ready(function($){

    $('.carousel').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: false,
        centerMode: true,
        centerPadding: '60px',
        variableWidth: true
    });

    $('.carousel-nav').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        arrows: true,
        appendArrows: '.carousel-arrows',
        prevArrow: '<span class="carousel-prev">&lt;-</span>',
        nextArrow: '<span class="carousel-next">-&gt;</span>',
        asNavFor: '.carousel',
    });

});

.slick-slide {
    padding: 20px;
}

.slick-current img {
    width: 120%;
    max-width: none;
}

<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=1" alt="">
    </div>
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=2" alt="">
    </div>
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=3" alt="">
    </div>
    <div>
        <img src="http://dummyimage.com/800x400/000/fff&text=4" alt="">
    </div>
    <div>
        <img src="http://dummyimage.com/400x400/000/fff&text=5" alt="">
    </div>
    <div>
        <img src="http://dummyimage.com/600x400/000/fff&text=6" alt="">
    </div>
</div>
<div class="carousel-nav">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
</div>
<div class="carousel-arrows">
</div>

Answer 1

由于您使用的是中心模式，因此您可以将幻灯片的变换添加到获得类滑动中心的幻灯片中。然后，要为缩放效果设置动画，您可以向光滑幻灯片类添加转换。

.carousel .slick-slide {

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.carousel .slick-center {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);

}