(FIXED) Slick Carousel - Bad translate value on slick track when using variableWidth

When slick carousel is set to use variableWidth it sets a bad translate value on slick-track.

by Aubrey Taylor

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 class="item">Unde</div>
        <div class="item">Omnis</div>
        <div class="item">Iste</div>
        <div class="item">Natus</div>
        <div class="item">Error</div>
        <div class="item">Sit</div>
        <div class="item">Voluptatem</div>
        <div class="item">Accusantium</div>
        <div class="item">Doloremque</div>
        <div class="item">Laudantium</div>
        <div class="item">Totam</div>
        <div class="item">Rem</div>
        <div class="item">Aperiam</div>
        <div class="item">Eaque</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: true,
    infinite: false,
    centerMode: false,
    slidesToShow: 2,
    prevArrow: '.js-prev',
    nextArrow: '.js-next'
});