Карусель с масштабированием текущего слайда

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

}