Variable Width Slick Slider

Carousel with variable width items.

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<h2>Variable Width</h2>

<div class="slider variable-width">
    
    <div class="item">
        <img src="http://placehold.it/250x245" />
    </div>|
    <div class="item">
        <img src="http://placehold.it/100x245" />
    </div>|
    <div class="item">
        <img src="http://placehold.it/100x245" />
    </div>|
    <div class="item">
        <img src="http://placehold.it/100x245" />
    </div>|
    <div class="item">
        <img src="http://placehold.it/100x245" />
    </div>|
</div>

CSS

.slider {
    position:relative;
}

.item {
    position:relative;
}

.item .description {
    position:absolute;
    color:#fff;
    z-index:10;
    bottom:-99em;
    transition: all .6s;
    width:100%;
    min-height:100px;
    margin:0;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-shadow:0px -100px 75px -75px rgba(0,0,0,0.7) inset;
    text-align:right;
}

.item .description a {
    color:#fff;
    text-decoration:none;
}

.item:hover .description {
    bottom:0;
}


.slick-prev:before, .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    opacity: 0.75;
    -moz-osx-font-smoothing: grayscale;
    color: #000;
}
.slick-prev {
    left: 0;
}

.slick-next {
    right:0;
}

.slick-prev, .slick-next {
    position: absolute;
    display: block;
    height: 245px;
    width: 20px;
    line-height: 0;
    font-size: 0px;
    cursor: pointer;
    background: none repeat scroll 0% 0% transparent;
    color: transparent;
    padding: 0px;
    border: medium none;
    outline: medium none;
    border-radius:none;
}

JavaScript

$('.variable-width').slick({
    arrows: true,
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: false
        }
    }, {
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
            slidesToScroll: 2
        }
    }, {
        breakpoint: 480,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1
        }
    }]
});