Center active slide with showing 3 slides in slick.js
<p>I'm using <code>slick.js</code> plugin and I want to make something like on their website. Here is <a href="https://jsfiddle.net/7cfmvo1w/" rel="nofollow">DEMO</a>.</p>

<p>Problem is, that first active slide <code>1</code> is not centered. I know I can use</p>

<pre><code>$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    focusOnSelect: true,
    centerMode: true
});
</code></pre>

<p>but then there are not 3 slides, but also parts of another 2 slides, see <a href="https://jsfiddle.net/7cfmvo1w/1/" rel="nofollow">HERE</a></p>