Slick Carousel - ширина контейнера не работает

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> 

МИНУС:

.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 000 пикселей, которая шире, чем должен загружаться 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 - это класс, используемый пятно-карусели. Просто изменить его на что-то, и вы будете в порядке

скрипку - https://jsfiddle.net/y3vs6h9q/

Обратите внимание, что я переименовал класс group-slick-cell1 только в разметке. Я не был уверен, какой из стилей в CSS пришел из ваших настроек и который из пятно-карусели.