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.

Eulau

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.

Ames

Brilliant. Working great. Thanks you saved my few hours. One thing is not working properly which is responsiveness. Let me try first. – Eulau

I didn't get time to sit with it...will do it later tonight. But I think I need to change the mode from center to something else. – Eulau

With CSS3 there are a lot of nice stuff you can do. But I am not that good myself using css. I believe you can try to check out the property you can give to it, like to differenciate computer screen from smart phones' one. Because basically here your are giving a size directly inside the code using px. Try to see with othe way to modify it. – Ames

Greate solution. It's unfortunate that variableHeight is not documented. – Mudslinger