光滑的旋转木马全宽，中心模式不起作用

Question

我正在尝试创建一个全宽页面滑块，其中一个幻灯片居中，两个幻灯片在两侧都可以部分显示。

但由于某种原因，可见的是一个很大的白色差距。我试着给img宽度100％，但图像分辨率扭曲。

Jquery代码：

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

演示 - 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。