Slick Carousel：幻灯片在具有动态宽度的网格子项内不是全宽

Question

我不知道如何让光滑的旋转木马获得正确的宽度。

我有一个具有动态宽度的部分，这意味着我在 javascript 中获得另外两个部分的宽度，我将结果作为 css 变量传递到正文 [=12] 中=] 标签，然后我使用 css calc() 从这两个结果中获取差异以获得我的蓝色部分的宽度

JS

$(window).on('load', function() {
   var leftWidth = $('.left').width();
   var gridWidth = $('.grid').width();
   var headerWidth = $('.header').width();
   
// get the widths of the sections and pass the value as a css variable
   $('body').attr('style', 
                  '--leftWidth: ' +leftWidth+'px; ' +
                  '--gridWidth: ' + gridWidth+'px; ' + 
                  '--headerWidth: ' + headerWidth+ 'px;');
});

CSS

.right {
  width: calc( var(--gridWidth) - var(--headerWidth));
}

问题在于，在蓝色部分内，我有一个只有文本的 slick 轮播，我希望它是全宽的，但是因为（我认为）它的父项具有动态宽度，slick 变得太宽了文本溢出/停留在一行。

起初我以为是因为父级有 display: grid，我尝试了将 grid-template-columns 设置为 minmax(0, 1fr) 的技巧，当容器没有时 无法从 js 获得动态宽度，我实际上需要 ...

FIDDLE IS HERE

Answer 1

我能够通过在设置 CSS vars 之后移动你的 Slick 初始化来实现它。

$(window).on('load', function() {
   var leftWidth = $('.left').width();
   var gridWidth = $('.grid').width();
   var headerWidth = $('.header').width();
   
   $('body').attr('style', '--leftWidth: ' +leftWidth+'px; --gridWidth: ' +gridWidth+'px; --headerWidth: ' +headerWidth+ 'px;');
   
   $('.carousel').slick({
      appendArrows: $('.append')
  });
});

这里的工作示例：https://jsfiddle.net/johxcz5w/

FWIW，您的原始代码在 FF (Mac) 中运行良好，起初令人困惑。

Slick Carousel：幻灯片在具有动态宽度的网格子项内不是全宽

Slick Carousel: slide is not full width inside grid child with dynamic width

javascript

jquery

css

slick.js