CODEWITHSUNDEEP
javascriptjquerycarouselowl-carouselslick.js
fiter
fiter

Reputation: 773

Carousel with zooming of current slide

I used the Slick.js to make a carousel just like on a picture, but I failed ( Does anybody knows any way to make a carousel just like on a picture? There should be a different width of slides, animation, and a current slide must have a bigger size

What I need to do:

enter image description here

What I have now - 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>

Upvotes: 1

Views: 12989

Answers (1)

cameron.townsend
cameron.townsend

Reputation: 106

Since you are using center mode you can add a transform of scale to the slide that gets the class slick-center. Then to animate the scale effect, you can add a transition to the slick-slide class.

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

}

Upvotes: 1

Related Questions