Question

我已经开始在我正在使用的网站上使用Slick Carousel插件，出于某种原因，如果我在Slick Carousel的目标元素周围设置一个包装器，除非我用像素设置它，否则宽度不受尊重当我需要宽度只增长到父元素的大小时，不是一个选项。

我也在使用Bootstrap以防万一。

HTML

<div class="col-md-6 col-xs-12">
<div class="group-filter">
    <span class="title">Group Filter</span>
    <div class="group-slick-cell">
        <div class="group-slick-wrapper">
            <div class="group-slick">
                <div><button class="btn btn-groups">Group 1</button></div>
                <div><button class="btn btn-groups">Group 2 more text</button></div>
                <div><button class="btn btn-groups">Group 3</button></div>
                <div><button class="btn btn-groups">Group 4 text</button></div>
            </div>
        </div>
    </div>
</div>

LESS：

.group-filter {
    display: table;
    width: 100%;

    .title {
        display: table-cell;
        font-size: 16px;
        color: @text-color;
        padding: 0 5px;
        vertical-align: middle;
        width: 1%;
    }

    .group-slick-cell {
        display: table-cell;
        width: 100%;
        height: 31px;

        .group-slick-wrapper {
            margin-left: 17px;
            width: 100%

            .btn {
                margin: 0 5px;
            }
        }
    }
}

JS：

groupSlick.slick({
    infinite: true,
    dots: false,
    speed: 200,
    slidesToShow: 3,
    slidesToScroll: 1,
    variableWidth: true,
    centerMode: true,
    draggable: false,
    accessibility: false
});

这是一个实际问题的JSFiddle。父容器的子容器将宽度推到20,000px，这比Bootstrap应该更宽。

https://jsfiddle.net/wqvth9ms/

Answer 1

对于可能正在寻找类似解决方案的人，我已经创建了一个对原始jsFiddle的更新，可能会帮助你。

我将display: table-cell更改为float: left，并将table-layout: fixed添加到包装器元素中。

https://jsfiddle.net/wqvth9ms/1/

Answer 2

标记对于其中一个父母具有类group-slick-cell。 group-slick-cell是由slick-carousel使用的类。只需将其改为某种东西就可以了。

小提琴 - https://jsfiddle.net/y3vs6h9q/

请注意，我仅在标记中将类重命名为group-slick-cell1。我不确定CSS中的哪些样式来自您的自定义，哪些来自光滑轮播。

光滑的转盘 - 容器宽度不起作用

2 个答案: