Slick carousel full width with center mode not working : <p>I am trying to create a full width page slider with one slide to be centered and 2 slides will be partially visible at both sides.</p>

<p>But for some reason there is a big white gap visible. I tried with giving img width 100% but the image resolution is distorting.</p>

<p>Jquery code:</p>

<pre><code>$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear'
});
</code></pre>

<p>Demo -- <a href="https://jsfiddle.net/squidraj/hn7xsa4y/" rel="noreferrer">https://jsfiddle.net/squidraj/hn7xsa4y/</a></p>

<p>Any help is highly appreciated.</p>
