Responsive & Flexible jQuery Carousel Plugin – slick

Live Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/slider/slick/css/slick.css" />
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/slider/slick/css/slick-theme.css" />
<style>
    .slider {
        width: 50%;
        margin: 0 auto;
    }

    .slick-slide {
        margin: 0px 20px;
    }

    .slick-slide img {
        width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }


    .slick-slide {
        transition: all ease-in-out .3s;
        opacity: .2;
    }

    .slick-active {
        opacity: .5;
    }

    .slick-current {
        opacity: 1;
    }

    .slick-dots li button::before {
        font-size: 30px !important;
    }
</style>
<h4>Demo 1</h4>
<section class="vertical-center-4 slider">
    <div>
        <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=10">
    </div>
</section>

<h4>Demo 2</h4>
<section class="vertical-center-3 slider">
    <div>
        <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=10">
    </div>
</section>

<h4>Demo 3</h4>
<section class="vertical-center-2 slider">
    <div>
        <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=10">
    </div>
</section>

<h4>Demo 4</h4>
<section class="vertical-center slider">
    <div>
        <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=10">
    </div>
</section>

<h4>Demo 5</h4>
<section class="vertical slider">
    <div>
        <img src="http://placehold.it/350x100?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x100?text=10">
    </div>
</section>

<h4>Demo 6</h4>
<section class="regular slider">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
</section>

<h4>Demo 7</h4>
<section class="variable slider">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/200x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/100x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/200x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/300x300?text=6">
    </div>
</section>

<h4>Demo 8</h4>
<section class="lazy slider" data-sizes="50vw">
    <div>
        <img data-lazy="http://placehold.it/350x300?text=1-350w"
            data-srcset="http://placehold.it/650x300?text=1-650w 650w, http://placehold.it/960x300?text=1-960w 960w"
            data-sizes="100vw">
    </div>
    <div>
        <img data-lazy="http://placehold.it/350x300?text=2-350w"
            data-srcset="http://placehold.it/650x300?text=2-650w 650w, http://placehold.it/960x300?text=2-960w 960w"
            data-sizes="100vw">
    </div>
    <div>
        <img data-lazy="http://placehold.it/350x300?text=3-350w"
            data-srcset="http://placehold.it/650x300?text=3-650w 650w, http://placehold.it/960x300?text=3-960w 960w"
            data-sizes="100vw">
    </div>
    <div>
        <img data-lazy="http://placehold.it/350x300?text=4-350w"
            data-srcset="http://placehold.it/650x300?text=4-650w 650w, http://placehold.it/960x300?text=4-960w 960w"
            data-sizes="100vw">
    </div>
    <div>
        <img data-lazy="http://placehold.it/350x300?text=5-350w"
            data-srcset="http://placehold.it/650x300?text=5-650w 650w, http://placehold.it/960x300?text=5-960w 960w"
            data-sizes="100vw">
    </div>
    <div>
        <!-- this slide should inherit the sizes attr from the parent slider -->
        <img data-lazy="http://placehold.it/350x300?text=6-350w"
            data-srcset="http://placehold.it/650x300?text=6-650w 650w, http://placehold.it/960x300?text=6-960w 960w">
    </div>
</section>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/slider/slick/js/slick.js"></script>
<script>
    $(document).ready(function () {

        $(".vertical-center-4").slick({
            dots: true,
            vertical: true,
            centerMode: true,
            slidesToShow: 4,
            slidesToScroll: 2
        });

        $(".vertical-center-3").slick({
            dots: true,
            vertical: true,
            centerMode: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });

        $(".vertical-center-2").slick({
            dots: true,
            vertical: true,
            centerMode: true,
            slidesToShow: 2,
            slidesToScroll: 2
        });

        $(".vertical-center").slick({
            dots: true,
            vertical: true,
            centerMode: true,
        });

        $(".vertical").slick({
            dots: true,
            vertical: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });

        $(".regular").slick({
            dots: true,
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });

        $(".center").slick({
            dots: true,
            infinite: true,
            centerMode: true,
            slidesToShow: 5,
            slidesToScroll: 3
        });

        $(".variable").slick({
            dots: true,
            infinite: true,
            variableWidth: true
        });

        $(".lazy").slick({
            lazyLoad: 'ondemand', // ondemand progressive anticipated
            infinite: true
        });

    });
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.