css - 具有不同宽度和不同空白的图像的轮播 - 如何实现均匀性？

Question

我有一个显示公司 Logo 的精美旋转木马。有些标志是长方形的，有些是正方形的。光滑的旋转木马设置为一次显示四个 Logo 。目前，方形 Logo 周围有空白区域，因此它们的幻灯片占据了旋转木马宽度的 25%，但我想消除该空白区域。我只是想不出如何在保持事物的响应方面的同时做到这一点。

您可以在所附的示例图片中明白我的意思。我怎样才能达到预期的结果？谢谢!

Answer 1

Slick carousel 文档在此处提供了相关信息:http://kenwheeler.github.io/slick/就在页面下方一点点。

它给出了轮播调用的示例，但 variableWidth 应该是关键:

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});