Slick轮播图全宽度与居中模式不起作用。

Question

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

但是由于某种原因，存在一个大的白色间隙可见。我尝试使用给img设置width为100％的方法，但图像分辨率会失真。

Jquery代码：

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

演示 -- https://jsfiddle.net/squidraj/hn7xsa4y/

非常感谢任何帮助。

- Prithviraj Mitra

Answer 1

你可以尝试使用：

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

这将消除间隙，但您可能需要添加一些CSS以确保光溜溜的<div>足够大以显示整个图像。您还可以修改相关图像的CSS。

- Squick

---

太棒了。运行得很好。谢谢你，你节省了我几个小时的时间。有一件事没有正常工作，那就是响应能力。让我先试试。 - Prithviraj Mitra

我没时间坐下来看它...晚上会处理。但我认为我需要将模式从中心改变成其他的东西。 - Prithviraj Mitra

使用CSS3可以做很多好看的东西。但是我自己在使用css方面并不太好。我相信你可以尝试查看可用的属性，例如区分计算机屏幕和智能手机屏幕。因为基本上在代码中直接使用px来给出一个尺寸。尝试找到其他修改方式。 - Squick

很棒的解决方案。不幸的是，“variableHeight”没有记录文档。 - Gustavo Straube