Karussell mit Zoom der aktuellen Folie

Question

Ich habe die Slick.js verwendet, um ein Karussell wie auf einem Bild zu machen, aber ich scheiterte ( Kennt jemand eine Möglichkeit, ein Karussell wie auf einem Bild zu machen? Es sollte ein anderes sein Breite von Dias, Animation und einem aktuellen Folie muss eine größere Größe

haben, was ich tun muss:

Was habe ich jetzt - 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

Da Sie Center-Modus verwenden Sie können eine mit dem Schlitten der Skala hinzufügen verwandeln, die die Klasse Slick-Center bekommt. Um den Skalierungseffekt zu animieren, können Sie der Klasse slick-slide einen Übergang hinzufügen.

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

}