Slick Carousel – Container width not working

I have started using the Slick Carousel plugin for a website I am working on and for some reason, if I set a wrapper around the targeted element for the Slick Carousel, the width is not honoured unless I set it with pixels which is not an option when I need the width to only grow to the size of the parent element.

I am using Bootstrap as well in case this helps.

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


Source: html

Leave a Reply