Slick variableWidth centerMode

by FiNGAHOLiC

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.14/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.14/slick.min.js"></script>
<div class="hotel-slider">

    <div class="hotel-slider__slide">
        <div class="hotel-slider__media">
        </div>
    </div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide">
        <div class="hotel-slider__media">
        </div>
    </div><!-- /.hotel-slider__slide -->

</div><!-- /.hotel-slider -->

SCSS

/*------------------------------------*\
    #HOTEL-SLIDER
\*------------------------------------*/


.hotel-slider {
}

    .hotel-slider__slide {
        background: yellow;
        height: 100px;
        width: 150px;
    }

    .hotel-slider__slide:nth-child(odd) {
        background: red;
        height: 100px;
        width: 150px;
    }

JavaScript

jQuery('.hotel-slider').slick({
    infinite: true,
    speed: 300,
    centerMode: true,
    variableWidth: true
});