光滑的滑块宽度错误

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时,它看起来像这样:

我不知道如何解决这个问题.我已经阅读了这些,没有修复:

初始化时滑动滑块错误宽度

光滑的轮播在初始化时加载错误的宽度

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

简短回答：

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

Answer 2

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

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

row

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

Answer 3

我只有在带有 bootstrap4、slick（和 owlCarousel）的 <768px 屏幕上有同样的问题，设置宽度超过 10000px 到那里的容器。问题是引导容器 (.container) 没有宽度属性 <768px，将其设置为 100% 可以解决问题。

Answer 4

我们不能总是删除所有容器display: flex并重新编码页面中的所有 CSS，只是为了使库正常工作。

根据我的经验，我发现问题出现在这一行之后：

_.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length)));

在版本 1.8.1 中，库设置了.slick-track宽度，似乎任何Flex 容器（any，不是直接容器）都会产生问题。

$('#slider-wrap').slick(...)我修复了强制（并在窗口调整大小事件上更新）滑块主包装器的固定宽度，这是您使用以下 Javascript 片段实例化滑块的元素：

var $sliderwrap = $('#slider-wrap');

// fix for flex begins here ----
function setW() {
    // use parent width, not always the right way
    // change it if your $sliderwrap parent width 
    // does not match your $sliderwrap width
    $sliderwrap.width($sliderwrap.parent().width());
}
setW();
window.addEventListener('resize', setW);
// end fix here ----

// instantiate the slider
$sliderwrap.slick(...);

我希望这可以帮助任何人。

Answer 5

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

1. 正文有一个显示声明：表
2. .page（一个页面包装器）有 display: inline-block

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