Question

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

我的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时，它看起来像这样：

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

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小时。我找不到任何解决方案......

Answer 1

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

在包装行div中添加col修复了我的问题。

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

虽然这可能与操作系统的问题没有直接关系，但我认为我会发布，因为其他用户可能会遇到类似的问题而且找到了这个帖子。

Answer 2

我有同样的问题，并且还处理了一些我没有创作的样式表继承的坏css。就我而言，我发现了两个问题：

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

所以我会检查以确保光滑的滑块没有嵌套在任何显示为table或inline-block的元素中

Answer 3

简短答案：

确保光滑的滑块位于带有display: block的容器内

详细答案：

创建新的CSS类.grid之后，我遇到了同样的问题。

.grid { display: grid; }

我的滑动滑块已经位于该类的容器内，但是该类之前已经存在，并且我的覆盖导致了该问题，因为以前是display: block。

Answer 4

不要将 display: flex 用于光滑的容器。这会导致移动设备出现问题。

Answer 5

Spencer Rysman的回答对我很有帮助。我在Sharepoint 2013中嵌入光滑滑块时遇到问题，发现webparts（成为一组嵌套的div）被定义为display：table和display：table-cell。通过更改要显示的样式：阻止，我的光滑滑块正常工作。

为了澄清，我的问题是类似的：滑块轨道的宽度变得非常宽（> 10,000像素），这在最新的Chrome和Firefox生产版本中都有。

经过多年的潜伏，我想特别感谢斯宾塞，所以刚刚报名参加。这就是为什么我还不能回答这个问题。

谢谢，斯宾塞。

Answer 6

我只有在bootstrap4小于768px的屏幕上有同样的问题，光滑（和owlCarousel）将宽度设置为10000px以上的容器。问题是引导容器（.container）没有宽度属性<768px，将其设置为100％可解决此问题。

Answer 7

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

variableWidth：是

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

$('.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
        }
    }]
});

Answer 8

主div容器必须
display:block;

或

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

minmax(0,1fr) 是方法。或定义的宽度（px，em，...）。 display:flex; 有问题。

Answer 9

在初始加载时，如果内部内容很重，在IOS中，平滑不会占用宽度-在很少的范围内。

通过在 slick-track

中添加css 最大宽度对我来说已修复

检查以下内容：

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

光滑的滑块宽度错误

9 个答案: