光滑的轮播没有响应（并且比页面更宽）答案

【问题标题】：Slick carousel not responsive (and wider than page)光滑的轮播没有响应（并且比页面更宽）
【发布时间】：2019-01-24 23:26:47
【问题描述】：

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

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

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

编辑：我意识到当屏幕达到 963 像素宽度时，轮播会保持固定宽度。我在我的 CSS 中使用 @media 查询，其中之一是用于 963 像素或更小的屏幕。这可能是相关的，我只是不知道如何。

另一个编辑：在我的屏幕（1280 像素）中，滑轨宽度是 6000 像素。当我开始减小屏幕宽度时，这个数字也随之减小，直到屏幕达到 963px，然后这个数字跳到 7200px 并变得比外部 div 更宽。 Slick-track 位于轮播的 div 中，它位于以下 div 中：内容、包装器、正文和 html。我刚刚把所有东西都放在了小提琴中：/pris0213/ovov7xwx/。请注意，包装器的最大宽度为 1500 像素；这是当屏幕变小（962px 或更小）时 div 的宽度。

【问题讨论】：

标签： css responsive-design carousel

【解决方案1】：

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

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

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

这可能不是此特定人员问题的答案，但与我遇到的问题/问题相同（只是原因不同），而且这个问题在搜索结果中是热门问题，所以我想我会添加在我的解决方案中也是如此，以防其他人遇到这个问题并且可以帮助他们。

【讨论】：

【解决方案2】：

您描述的@media 规则中的CSS 只会在屏幕宽度降至962 像素以下时应用；此规则应用的 CSS 导致轮播中断。

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

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

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

当屏幕的最小宽度为 768 像素时，<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
    }
}

【讨论】：

感谢您的帮助。如果您仍然感兴趣，我刚刚编辑了我的问题并添加了更多信息。
@Priscila 我已根据您的编辑更新了我的答案。我希望这能解决您的问题！
再次感谢您对我的帮助。这并没有立即起作用，但它帮助我意识到我应该在代码中更改的一些事情（与填充和不同的屏幕尺寸有关）。现在，如果轮播宽度超过 416 像素，则轮播适合屏幕（虽然我还不知道为什么）；但是，当我更改屏幕的宽度时，我需要重新加载页面以使轮播具有正确的大小......

【解决方案3】：

如果您在 flexbox 元素内初始化一个光滑的轮播，那么光滑的轮播会以指数方式增加它的宽度。为了避免这种情况，将 min-width:0 添加到其父级或 * 元素中。

像这样：

* {
  min-height: 0;
  min-width: 0;
}

【讨论】：