Slick Carousel - Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.min.js"></script>
<!-- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque-->
<div class="wrapper">
    <div class="carousel js-slick-el">
        <div class="item">Set</div>
        <div class="item">Ut</div>
        <div class="item">Perspiciatis</div>
    </div>
</div>
<button class="js-prev">Previous</button>
<button class="js-next">Next</button>

CSS

* {
    box-sizing: border-box;
}

body {
    background: darkgray;
    overflow: hidden;
}

/* Slider */
.slick-slider
{
    /* this is really important~!!!! */
    position: relative;
}

.wrapper {
    width: 500px;
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 10px;
    background: white;
}
.carousel {
    /* stub */
}
.carousel .item {
    display: inline-block;
    padding: 5px 0;
    margin: 0 10px;
}

JavaScript

$('.js-slick-el').slick({
    speed: 300,
    variableWidth: false,
    infinite: true,
    centerMode: false,
    arrows: true,
    slidesToShow: 5,
    prevArrow: '.js-prev',
    nextArrow: '.js-next'
});