Slick carousel full width with center mode not working

Question

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.

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

Jquery code:

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

Demo -- https://jsfiddle.net/squidraj/hn7xsa4y/

Any help is highly appreciated.

Answer 1

You might want to try using :

$('.slider').slick({
centerMode:true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    variableWidth: true,
    variableHeight: true
});

This should remove the gap, but you might need to add some css to make sure that the slick <div> will be large enough to display your whole image. You can also modify the css for the related images.