responsive carousel - unslick breakpoints example

by ian_smithz

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="//kenwheeler.github.io/slick/slick/slick-theme.css">
<div class="slider responsive">
    <div>
        <h3>1</h3>
    </div>
    <div>
        <h3>2</h3>
    </div>
    <div>
        <h3>3</h3>
    </div>
    <div>
        <h3>4</h3>
    </div>
    <div>
        <h3>5</h3>
    </div>
    <div>
        <h3>6</h3>
    </div>
    <div>
        <h3>7</h3>
    </div>
    <div>
        <h3>8</h3>
    </div>
</div>

CSS

.slider {
    width: 90%;
    margin: 0 auto;
    border: 1px solid red;
}

h3 {
        text-align: center;
}

JavaScript

var prevArrow = '<button id="slider_previous" type="button" data-role="none" class="btn pagi__link slick-prev"><span class="icon-left-dir"></span></button>';
    		var nextArrow = '<button id="slider_next" type="button" data-role="none" class="btn pagi__link slick-next"><span class="icon-right-dir-1"></span></button>';

    		$('.slider-responsive').prepend(prevArrow, nextArrow);

$('.responsive').slick({
    dots: true,
    infinite: true,
                arrows: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [{
        breakpoint: 99999,
        settings: "unslick"
    }, {
        breakpoint: 1024,
        settings: {
            slidesToShow: 4,
            slidesToScroll: 4
        }
    }, {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1
        }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
    ]
});