Javascript 光滑的滑块宽度错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45735511/
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 slider gets wrong width
提问by Felix Rosén
My slick slider gets wrong width when initialized and when I change screen resolutions.
在初始化和更改屏幕分辨率时，我光滑的滑块宽度错误。
My js:
我的js：
$('.slider').slick({
infinite: false,
speed: 300,
initialSlide: 1,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 650,
settings: {
initialSlide: 2,
slidesToShow: 1
}
}]
});
My css:
我的CSS：
.sub-slider {
width: 100%;
display: flex;
flex-flow: column;
.slider {
display: flex;
flex-flow: row;
justify-content: center;
align-content: center;
align-items: center;
min-width:500px;
.sub-box {
text-align: center;
padding-top: 45px;
cursor:pointer;
.title {
color: #6deca0;
font-family: "AmsiProNarw", sans-serif;
font-size: 48px;
font-style: italic;
font-weight: 800;
}
.price {
color: #393939;
font-family: "AmsiProNarw", sans-serif;
font-size: 18px;
font-style: italic;
font-weight: 800;
}
.sub-slider-btn {
margin: 60px 20px;
border-color: #eaeaea!important;
background-color: #fdfdfd!important;
color: #686868!important;
}
}
.sub-box:hover {
transition: border .2s;
border-bottom: 14px solid #6deca0;
.sub-slider-btn{
border-color: #6deca0!important;
background-color: rgba(108,235,159,.2)!important;
color: #393939!important;
}
}
}
.sub-slider-confirmation-btn-wrp {
align-self: center;
display: none;
.sub-slider-confirmation-btn {
cursor:pointer;
$margin: 20px;
$height: 45px;
height: $height;
width: 80px;
border: 1px solid #ccc;
border-radius: 8px;
margin: $margin $margin $margin $margin;
text-align: center;
line-height: $height;
font-weight: 800;
}
}
}
This is how it is loaded, even though I have specified slidesToShow: 3.
这是它的加载方式，即使我已经指定了slidesToShow: 3.
Then when I change to resposive it looks like this:
然后，当我更改为响应式时，它看起来像这样：
I am not sure how to fix this. I have read through these, with no fix:
我不知道如何解决这个问题。我已经通读了这些，没有修复：
Slick slider wrong width on initialization
Slick carousel loads the wrong width on initialization
https://github.com/kenwheeler/slick/issues/790
https://github.com/kenwheeler/slick/issues/790
https://github.com/kenwheeler/slick/issues/1180
https://github.com/kenwheeler/slick/issues/1180
https://github.com/kenwheeler/slick/issues/2167
https://github.com/kenwheeler/slick/issues/2167
edit:
编辑：
I made a fiddle https://jsfiddle.net/simeydotme/fmo50w7n/
我做了一个小提琴https://jsfiddle.net/simeydotme/fmo50w7n/
It seems to work in the fiddle, but not on my site. Maybe I inherit some bad css? But I've been trying to debug this for 5h now. And I cant find any solution..
它似乎在小提琴中有效，但在我的网站上无效。也许我继承了一些不好的css？但是我现在一直在尝试调试这个 5 小时。而且我找不到任何解决方案..
回答by Eddie Padin
I also encountered the same issue - slider track width too large upwards of 30,000px wide. After reading Spencer Rysman's answer, I reviewed my markup and realized that I had applied a rowclass to the div wrapping my slider and since I'm using bootstrap 4 the default display:flexproperty used with the row class was causing unexpected output with the slide elements.
我也遇到了同样的问题 - 滑块轨道宽度太大，超过 30,000 像素。在阅读了 Spencer Rysman 的回答后，我查看了我的标记并意识到我已经将一个row类应用于包装我的滑块的 div 并且由于我使用的是引导程序 4，因此display:flex与 row 类一起使用的默认属性会导致幻灯片元素出现意外输出。
Adding a col within the wrapping row div fixed the issue for me.
在包装行 div 中添加一个 col 为我解决了这个问题。
<div class="row">
<div class="col-12">
../slider markup
</div>
</div>
Although, this may not be directly related to the op's issue, I thought I'd post as other users may encounter a similar problem as I did and find this thread.
虽然，这可能与 op 的问题没有直接关系，但我想我会发帖，因为其他用户可能会遇到与我类似的问题并找到此线程。
回答by Spencer Rysman
I had this same issue and was also dealing with some inherited bad css from stylesheets that I did not author. In my case I found 2 problems:
我遇到了同样的问题，并且还在处理一些从我没有创作的样式表中继承的不良 css。就我而言，我发现了两个问题：
- body had a declaration of display: table
- .page (a page wrapper) had display: inline-block
- 正文有一个显示声明：表
- .page（一个页面包装器）有 display: inline-block
So I would check to make sure that the slick slider is not nested inside of any element that is displayed as table or inline-block
所以我会检查以确保光滑的滑块没有嵌套在任何显示为表格或内联块的元素中
回答by Pavel L.
I have the same problem only on screens <768px with bootstrap4, slick (and owlCarousel) set width more then 10000px to there container. The issue was that's the bootstrap container (.container) does't have a width property <768px, set it to 100% resolve the problem.
我只有在带有 bootstrap4、slick（和 owlCarousel）的 <768px 屏幕上有同样的问题，设置宽度超过 10000px 到那里的容器。问题是引导容器 (.container) 没有宽度属性 <768px，将其设置为 100% 可以解决问题。
回答by Black
Short Answer:
简答：
Make sure that your slick slider is inside of a container with display: block
确保您的光滑滑块位于容器内 display: block
Long Answer:
长答案：
I had the same problem after creating a new css class .grid.
创建新的 css 类后我遇到了同样的问题.grid。
.grid { display: grid; }
My slick slider is already located inside a container with this class, but the class already existed before and my overwrite was causing the problem, because it was display: blockbefore.
我的光滑滑块已经位于具有此类的容器内，但该类之前已经存在，而我的覆盖导致了问题，因为它display: block以前存在过。
