Javascript 光滑滑块的宽度错误

当初始化和更改屏幕分辨率时，我的平滑滑块的宽度错误

我的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

然后，当我更改为resposive时，它看起来是这样的：

我不知道如何解决这个问题。我已经通读了这些，但没有修改：

编辑：

我拉了把小提琴

---

它似乎在小提琴中起作用，但在我的网站上不起作用。也许我继承了一些坏的css？但我已经试着调试了5个小时了。而且我找不到任何解决方案。

我也有同样的问题，并且处理一些从样式表继承来的坏css，而我并没有编写这些样式表。在我的案例中，我发现了两个问题：

正文中有一个显示声明：table

.page（页面包装器）具有显示：内联块

---

因此，我会检查以确保滑动滑块没有嵌套在任何显示为表格或内联块的元素中，我也遇到了相同的问题-滑块轨迹宽度过大，超过30000px宽。在阅读了Spencer Rysman的回答之后，我回顾了我的标记，并意识到我已经将

行

类应用于包装滑块的div，并且由于我使用的是bootstrap 4，所以与row类一起使用的默认

display:flex

属性导致了幻灯片元素的意外输出

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

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

../slider标记

---

虽然，这可能与op的问题没有直接关系，但我想我会发布一些帖子，因为其他用户可能会遇到与我类似的问题，并发现这个帖子

我只有在屏幕上才会遇到同样的问题简短回答：

确保滑动条位于带有

display:block

长答案：

在创建了一个新的css类

.grid

之后，我也遇到了同样的问题

.grid { display: grid; }

---

我的slick slider已经位于包含此类的容器中，但是该类之前就已经存在，我的覆盖导致了问题，因为它之前是

display:block

。

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

通过将cssmax width添加到slick track

检查以下各项：

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

---

我遇到了同样的问题，并且在尝试了上述方法之后没有任何效果。我重新访问了这个页面并添加了这个

可变宽度：true

到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
        }
    }]
});

$（'.slider'）。光滑({
无限：错，
速度:300,，
首张幻灯片：1，
幻灯片放映：3，
幻灯片滚动：1，
variableWidth:true，不要对光滑的集装箱使用
display:flex
。这会在移动设备上造成问题。
主div集装箱必须是

显示：块；

或

<代码>显示：网格；网格模板列：重复（4，最小最大值（0,1fr）；

---

minmax（0,1fr）

是方法。或定义的宽度（px，em，…。

display:flex；

是问题。

尝试更改重新加载的宽度page@BilalHussain请进一步解释“我的css:…”-slick自带了自己的StyleSheet，它应用了工作所需的基本样式。现在，当我看到你覆盖了slider使用的基本类的属性时，我首先要问的是，你是否没有通过添加这些属性来搞砸这件事。它的

css

有一些定义的大小可供使用。如果你只是调整t使用“浏览器最大化”按钮或“调整大小”工具打开浏览器，则在达到定义的点之前，浏览器可能无法按预期工作。我建议您使用模拟器检查响应性，或使用实时设备验证响应性。非常感谢，您的回答帮助了我（Internet Explorer中滑动条的问题）！谢谢！！它解决了我的问题。我正在使用angular 8和bootstrap 4。对于

bulma

，您可以使用

我注意到带有

显示：grid

的包装器也会在Safari中造成此问题。在我的情况下，将

网格模板列：1fr 1fr

更改为

网格模板列：50%

修复了此问题。看起来Safari需要更具体的宽度。带有

display:flex

的包装器元素也可能会导致问题。我也有同样的问题。继承了一个使用display:table；和display:table cell的站点；将它们改为block和inline block解决了问题。你这个该死的图例！！！现场爆炸！有人请给这个人a举起一杯啤酒什么的！！！同样，看起来斯里克只是不喜欢在一个没有特定宽度的flex容器中，并且会增长到无穷大。设置一个宽度：在顶层100%。容器修复了它。谢谢。