javascript 光滑的旋转木马 - 容器宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31179569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick Carousel - Container width not working
提问by ChronixPsyc
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.
我已经开始在我正在处理的网站上使用 Slick Carousel 插件，并且出于某种原因，如果我为 Slick Carousel 的目标元素设置了一个包装器，则宽度不会受到尊重，除非我将其设置为像素，这不是一个选项当我需要宽度仅增长到父元素的大小时。
I am using Bootstrap as well in case this helps.
我也在使用 Bootstrap 以防万一。
HTML
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:
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.
这是实际问题的 JSFiddle。父容器的子容器将宽度推到 20,000 像素，这比 Bootstrap 应该达到的宽度要宽。
回答by ChronixPsyc
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.
对于可能正在寻找与此类似的修复程序的人，我已经为下面的原始 jsFiddle 创建了一个更新，它可能能够帮助您。
I changed the display: table-cellinto a float: leftand also added the table-layout: fixedto the wrapper element.
我将 the 更改display: table-cell为 afloat: left并将 the 添加table-layout: fixed到包装器元素中。
回答by potatopeelings
The markup had the class group-slick-cellfor one of the parents. group-slick-cellis a class used by slick-carousel. Just change it to something and you will be alright
标记group-slick-cell为其中一位父母提供了课程。group-slick-cell是 slick-carousel 使用的类。把它改成一些东西，你会没事的
Fiddle - https://jsfiddle.net/y3vs6h9q/
小提琴 - https://jsfiddle.net/y3vs6h9q/
Note that I renamed the class to group-slick-cell1only in the markup. I wasn't sure which of the styles in the CSS came from your customizations and which from slick-carousel.
请注意，我将类重命名为group-slick-cell1仅在标记中。我不确定 CSS 中的哪些样式来自您的自定义，哪些来自 slick-carousel。
