Слайд-карусель полной ширины с центральным режимом не работает

Question

Я пытаюсь создать ползунок полноразмерной страницы с одним слайдом для центровки и 2 слайда будут частично видны с обеих сторон.

Но по какой-то причине видны большие белые промежутки. Я пробовал с разрешением img шириной 100%, но разрешение изображения искажается.

код Jquery:

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

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

Любая помощь высоко ценится.

Answer 1

Вы можете попробовать использовать:

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

Это должно устранить разрыв, но вам может понадобиться, чтобы добавить некоторые CSS, чтобы убедиться, что пятно <div> будет достаточно большим, чтобы отобразить весь ваш образ. Вы также можете изменить css для связанных изображений.