javascript - 可缩放当前幻灯片的轮播

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

由于您使用的是中心模式，因此您可以向幻灯片添加缩放变换，以获取 slick-center 类。然后，要为缩放效果设置动画，您可以向 slick-slide 类添加过渡。

.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);

}