admin管理员组

文章数量:1025208

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:

What I have now - /

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/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src=".11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
    <div>
        <img src=";text=1" alt="">
    </div>
    <div>
        <img src=";text=2" alt="">
    </div>
    <div>
        <img src=";text=3" alt="">
    </div>
    <div>
        <img src=";text=4" alt="">
    </div>
    <div>
        <img src=";text=5" alt="">
    </div>
    <div>
        <img src=";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>

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:

What I have now - https://jsfiddle/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/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
    <div>
        <img src="http://dummyimage./600x400/000/fff&text=1" alt="">
    </div>
    <div>
        <img src="http://dummyimage./600x400/000/fff&text=2" alt="">
    </div>
    <div>
        <img src="http://dummyimage./600x400/000/fff&text=3" alt="">
    </div>
    <div>
        <img src="http://dummyimage./800x400/000/fff&text=4" alt="">
    </div>
    <div>
        <img src="http://dummyimage./400x400/000/fff&text=5" alt="">
    </div>
    <div>
        <img src="http://dummyimage./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>

  • javascript
  • jquery
  • carousel
  • owl-carousel
  • slick.js
Share Improve this question edited May 21, 2016 at 17:27 Yass 2,6683 gold badges15 silver badges21 bronze badges asked May 21, 2016 at 13:57 fiterfiter 7731 gold badge13 silver badges25 bronze badges 4
  • care to share your code? – Martin Gottweis Commented May 21, 2016 at 14:11
  • I've updated my question – fiter Commented May 21, 2016 at 15:15
  • actually this was not the answer.. but if you use bootstrap.. it provides a nice carousel what you was looking for.. or just look on the code behind the bootstrap css – Muhammed Misir Commented May 21, 2016 at 15:16
  • ive worked with both slick and owl. I suggest you try owl, maybe it will work better for you. – Martin Gottweis Commented May 21, 2016 at 15:31
Add a ment  | 

1 Answer 1

Reset to default 1

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

}

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:

What I have now - /

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/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src=".11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
    <div>
        <img src=";text=1" alt="">
    </div>
    <div>
        <img src=";text=2" alt="">
    </div>
    <div>
        <img src=";text=3" alt="">
    </div>
    <div>
        <img src=";text=4" alt="">
    </div>
    <div>
        <img src=";text=5" alt="">
    </div>
    <div>
        <img src=";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>

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:

What I have now - https://jsfiddle/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/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr/jquery.slick/1.6.0/slick.min.js"></script>
<div class="carousel">
    <div>
        <img src="http://dummyimage./600x400/000/fff&text=1" alt="">
    </div>
    <div>
        <img src="http://dummyimage./600x400/000/fff&text=2" alt="">
    </div>
    <div>
        <img src="http://dummyimage./600x400/000/fff&text=3" alt="">
    </div>
    <div>
        <img src="http://dummyimage./800x400/000/fff&text=4" alt="">
    </div>
    <div>
        <img src="http://dummyimage./400x400/000/fff&text=5" alt="">
    </div>
    <div>
        <img src="http://dummyimage./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>

  • javascript
  • jquery
  • carousel
  • owl-carousel
  • slick.js
Share Improve this question edited May 21, 2016 at 17:27 Yass 2,6683 gold badges15 silver badges21 bronze badges asked May 21, 2016 at 13:57 fiterfiter 7731 gold badge13 silver badges25 bronze badges 4
  • care to share your code? – Martin Gottweis Commented May 21, 2016 at 14:11
  • I've updated my question – fiter Commented May 21, 2016 at 15:15
  • actually this was not the answer.. but if you use bootstrap.. it provides a nice carousel what you was looking for.. or just look on the code behind the bootstrap css – Muhammed Misir Commented May 21, 2016 at 15:16
  • ive worked with both slick and owl. I suggest you try owl, maybe it will work better for you. – Martin Gottweis Commented May 21, 2016 at 15:31
Add a ment  | 

1 Answer 1

Reset to default 1

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

}

本文标签： javascriptCarousel with zooming of current slideStack Overflow

版权声明：本文标题：javascript - Carousel with zooming of current slide - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745615166a2159244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。