Question

我正在尝试在我的网站中使用 Slick carousel ，但我的宽度一直存在问题。

当我加载页面时，它很适合div，但是，当我最小化窗口时，它保持相同的宽度，创建一个水平滚动条。此外，右箭头超出了页面内容的范围。

我之前尝试过使用 OWL Carousel 并最终遇到同样的问题（还有其他问题）。你们有谁知道这可能是什么？

编辑：我已经意识到当屏幕宽度达到963px时，旋转木马会保持固定的宽度。我在CSS中使用@media查询，其中一个用于963px或更小的屏幕。这可能是相关的，我只是不知道如何。

另一个编辑：我的屏幕（1280像素）中的光滑轨道宽度为6000px。当我开始减小屏幕的宽度时，这个数字也会减少，直到屏幕达到963px，然后这个数字跳到7200px并且比外部div宽。光滑轨道位于旋转木马的div内，它位于以下div中：content，wrapper，body和html。我把所有东西放在一个小提琴中：/ pris0213 / ovov7xwx /。请注意，包装器的最大宽度为1500px;这是div在屏幕变小（962px或更小）时获得的宽度。

Answer 1

您所描述的@media规则中的CSS仅在屏幕宽度低于962px时才会应用;此规则应用的CSS会导致您的轮播中断。

没有看到HTML和CSS，我无法解决您的问题 - 我建议您检查包含轮播幻灯片的div的宽度，并确保它可以在其中水平放置所有内容（如果您'坚持 Slick carousel 类，它应该是slick-track类的div。

修改：查看您提供的代码后，我发现了您的问题：

@media only screen and (min-width: 768px) {
    .content {
        padding: 0 10%;
    }
}

当屏幕的最小宽度为768px时，<div class="content">侧面有填充，向内推动图库内容。箭头有目的地位于div之外，其中存在光滑的旋转木马（在<div class="gallery">内）并且愉快地坐在由填充物创建的空间的顶部。

但是，一旦屏幕低于此最小宽度，<div class="content">将丢失填充。 <div class="gallery">的宽度增加以适应新的可用空间并向外推动箭头; 你无法在JSFiddle中看到它，因为它被推出框架并被隐藏。因此，您无法再看到箭头，并且出现水平滚动条以适应额外的宽度箭头。

您可以通过对任何宽度的内容应用相同的填充来解决此问题。如果您需要保留上述代码，可以试试这个：

@media only screen and (max-width: 767px) {
    .gallery {
        margin: 0 10%; //Replace the lost padding with a margin
    }
}

Answer 2

我遇到了同样的问题;滑块在桌面上看起来很好，但保持相同的高度并且由于屏幕尺寸变小而没有响应，我的修复非常简单。

无论出于何种原因，光滑附带的默认样式表仅将 display：block; 应用于 .slick-slide img ，我只需要添加宽度和高度像这样：

.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
 }

这可能不是这个特定人的问题的答案，但这是我遇到的同样的问题/问题（只是一个不同的原因），这个问题在搜索结果中是最受欢迎的，所以我认为我也会添加我的解决方案以防其他人遇到此问题并且可以帮助他们。

Answer 3

如果在flexbox元素内部初始化圆滑的轮播，则圆滑的轮播会以指数形式增加其宽度。为了避免这种情况，请在其父级或*元素中添加min-width：0。

喜欢这个：

dispose()

光滑的旋转木马没有响应（并且比页面宽）

3 个答案: