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

Here's a JSFiddle of the actual issue. The child of the parent container is pushing the width out to 20,000px which is wider than what Bootstrap should be going to.

/

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

Here's a JSFiddle of the actual issue. The child of the parent container is pushing the width out to 20,000px which is wider than what Bootstrap should be going to.

https://jsfiddle/wqvth9ms/

• javascript
• html
• css
• less
• slick.js

• 1 You might want to post a fiddle - I tried constructing a basic mock using the above code and there seems to be missing less variables, missing markup.... cheers! – potatopeelings Commented Jul 2, 2015 at 10:47
• @potatopeelings I've added an edit to my original post with a JSFiddle that can clearly see the issue with the width. Thanks! – ChronixPsyc Commented Jul 3, 2015 at 8:38
• For me it looks like display: table problem (if you try different .group-filter widths you see it never has any effect and it always works like width: auto, thus the 20Kpx width propagates all the way up to col-md-6). You could try table-layout: fixed; (demo) or some other stuff to work it around but personally I'd suggest to not use table/table-cell stuff with carousels to avoid further magic pitfalls (because normally carousels are not written with a table-layout in mind). – seven-phases-max Commented Jul 3, 2015 at 12:19
• @seven-phases-max If you make this ment an answer, I will mark it as the correct one because it was down to the use of table and table-cell. I changed the title and group-slick-cell to display: inline-block and changed the widths around, added table-layout: fixed and it seems to have worked great! – ChronixPsyc Commented Jul 3, 2015 at 15:42
• I think it would be better if you just post your answer with your (simplified) changes that fix it... – seven-phases-max Commented Jul 4, 2015 at 12:16

2 Answers 2

For someone that might be looking for a similar fix to this, I have created an update to the original jsFiddle below that might be able to help you out.

I changed the display: table-cell into a float: left and also added the table-layout: fixed to the wrapper element.

https://jsfiddle/wqvth9ms/1/

The markup had the class group-slick-cell for one of the parents. group-slick-cell is a class used by slick-carousel. Just change it to something and you will be alright

Fiddle - https://jsfiddle/y3vs6h9q/

Note that I renamed the class to group-slick-cell1 only in the markup. I wasn't sure which of the styles in the CSS came from your customizations and which from slick-carousel.