光滑的滑块宽度错误答案

【问题标题】：Slick slider gets wrong width光滑的滑块宽度错误
【发布时间】：2026-02-02 18:50:01
【问题描述】：

我的光滑滑块在初始化和更改屏幕分辨率时宽度错误。

我的js：

$('.slider').slick({
    infinite: false,
    speed: 300,
    initialSlide: 1,
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 650,
        settings: {
            initialSlide: 2,
            slidesToShow: 1
        }
    }]
});

我的 CSS：

.sub-slider {
    width: 100%;
    display: flex; 
    flex-flow: column;

    .slider {
        display: flex;   
        flex-flow: row;
        justify-content: center;
        align-content: center;
        align-items: center;
        min-width:500px;

        .sub-box {
            text-align: center;
            padding-top: 45px;
            cursor:pointer;

            .title {
                color: #6deca0;
                font-family: "AmsiProNarw", sans-serif;
                font-size: 48px;
                font-style: italic;
                font-weight: 800;
            }
            .price {
                color: #393939;
                font-family: "AmsiProNarw", sans-serif;
                font-size: 18px;
                font-style: italic;
                font-weight: 800;
            }
            .sub-slider-btn {
                margin: 60px 20px;
                border-color: #eaeaea!important;
                background-color: #fdfdfd!important;
                color: #686868!important;
            }
        }

        .sub-box:hover { 
            transition: border .2s;            
            border-bottom: 14px solid #6deca0;
            .sub-slider-btn{
                border-color: #6deca0!important;
                background-color: rgba(108,235,159,.2)!important;
                color: #393939!important;
            }
        }
    }

    .sub-slider-confirmation-btn-wrp { 
        align-self: center;
        display: none;
        .sub-slider-confirmation-btn {
            cursor:pointer;
            $margin: 20px;
            $height: 45px;
            height: $height;
            width: 80px;
            border: 1px solid #ccc;
            border-radius: 8px;
            margin: $margin $margin $margin $margin;
            text-align: center;
            line-height: $height;  
            font-weight: 800;
        }
    }

}

这就是它的加载方式，即使我指定了slidesToShow: 3。

然后当我更改为响应式时，它看起来像这样：

我不确定如何解决这个问题。我已经阅读了这些，没有修复：

Slick slider wrong width on initialization

Slick carousel loads the wrong width on initialization

https://github.com/kenwheeler/slick/issues/790

https://github.com/kenwheeler/slick/issues/1180

https://github.com/kenwheeler/slick/issues/2167

编辑：

我做了一个小提琴https://jsfiddle.net/simeydotme/fmo50w7n/

它似乎在小提琴中工作，但在我的网站上却不行。也许我继承了一些糟糕的CSS？但我现在一直在尝试调试这个 5 小时。而且我找不到任何解决方案..

【问题讨论】：

尝试改变重新加载页面的宽度
@BilalHussain 请进一步解释
“My css: ...” - slick 带有自己的样式表，可以应用其工作所需的基本样式。现在，当我看到您覆盖滑块使用的基本类的属性时，我首先会质疑您是否自己添加了这些属性。
它的css 工作有一些定义的大小。如果您只是使用浏览器最大化按钮或调整大小工具调整浏览器的大小，那么在达到定义的点之前它可能无法按预期工作。我建议您使用模拟器来检查响应性或使用实时设备来验证相同..

标签： javascript jquery html css slick.js

【解决方案1】：

我也遇到了同样的问题 - 滑块轨道宽度太大，超过 30,000 像素。在阅读了 Spencer Rysman 的回答后，我查看了我的标记并意识到我已将 row 类应用于包装我的滑块的 div 并且由于我使用的是引导程序 4，因此与行类一起使用的默认 display:flex 属性导致了意外的输出与幻灯片元素。

在包装行 div 中添加一个 col 为我解决了这个问题。

<div class="row">
    <div class="col-12">
       ../slider markup
    </div>
</div>

虽然这可能与操作的问题没有直接关系，但我想我会发布，因为其他用户可能会遇到与我类似的问题并找到此线程。

【讨论】：

非常感谢，您的回答帮助了我（Internet Explorer 中滑动滑块的问题）！
谢谢！！它解决了我的问题。我正在使用 angular 8 和 bootstrap 4。
对于bulma，您可以使用<div class="column is-12">
我注意到带有display: grid 的包装器也会在 Safari 中产生这个问题。就我而言，将grid-template-columns: 1fr 1fr 更改为grid-template-columns: 50% 50% 解决了这个问题。看起来 Safari 需要更具体的宽度。

【解决方案2】：

我只有在

【讨论】：

你这个该死的传奇！！！当场轰！有人请给这个人提个啤酒吧！！！
同样，看起来 slick 只是不喜欢在没有特定宽度的 flex 容器内，并且会增长到无穷大。设置宽度：顶层.container 100% 修复了它。谢谢。

【解决方案3】：

我遇到了同样的问题，并且还处理了一些从我没有编写的样式表中继承的坏 css。就我而言，我发现了 2 个问题：

body 有一个 display: table 声明
.page（页面包装器）显示：inline-block

所以我会检查以确保光滑的滑块没有嵌套在任何显示为表格或内联块的元素中

【讨论】：

带有display: flex 的包装元素也可能导致问题。
我也遇到了同样的问题。继承了一个使用 display:table 的站点；并显示：表格单元格；将它们更改为 block 和 inline-block 解决了这个问题。

【解决方案4】：

在初始加载时，slick 不会占用宽度，在 IOS - 在少数设备中，如果内部内容很重。

通过将 css max-width 添加到 slick-track

为我修复了

检查以下内容：

$(".slick-track").css("max-width", $(window).width());

【讨论】：

.slick-track { 最大宽度：100%; }

【解决方案5】：

简答：

确保您的光滑滑块位于设置为 display: block 的容器内

【讨论】：

【解决方案6】：

我遇到了同样的问题，在尝试上述方法后无济于事。我重新访问了docs 并添加了这个

可变宽度：真

到 javascript 配置块。所以你的代码看起来像这样

$('.slider').slick({
    infinite: false,
    speed: 300,
    initialSlide: 1,
    slidesToShow: 3,
    slidesToScroll: 1,
    variableWidth: true, <=== change here
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 2
        }
    }, {
        breakpoint: 650,
        settings: {
            initialSlide: 2,
            slidesToShow: 1
        }
    }]
});

【讨论】：

【解决方案7】：

不要将display: flex 用于光滑的容器。它会在移动设备上引起问题。

【讨论】：

【解决方案8】：

主 div 容器必须是
display:block;

或

display:grid; grid-template-columns:repeat(4,minmax(0,1fr));

minmax(0,1fr) 就是这样。或定义的宽度（px、em、...）。 display:flex; 有问题。

【讨论】：

【解决方案9】：

如果任何阻止的东西有效，请添加到您的 CSS 文件中：

.slick-track {display: flex !important}

.slick-slide {height: auto;}

【讨论】：