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

Question

我正在尝试在我的网站中使用 Slick carousel，但我遇到了一些宽度问题。

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

我之前尝试过使用 OWL Carousel，结果遇到了同样的问题（还有更多问题）。你们中有人知道这可能是什么吗？

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

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

Answer 1

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

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

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

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

当屏幕的最小宽度为 768px 时，<div class="content"> 两侧有填充，将图库内容向内推。箭头有目的地放置在 div 外，那里有光滑的旋转木马（在 <div class="gallery"> 内），并愉快地位于由填充创建的 space 之上。

但是，一旦屏幕低于这个最小宽度，<div class="content"> 就会失去填充。 <div class="gallery"> 的宽度增加以适应新可用的 space 并将箭头进一步向外推； 您在 JSFiddle 中看不到它，因为它被推出框架并被隐藏。因此，您再也看不到箭头，并且会出现一个水平滚动条以适应箭头的额外宽度。

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

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

Answer 2

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

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

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

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

Answer 3

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

像这样：

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

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

Slick carousel not responsive (and wider than page)

css

carousel

responsive-design