css - 光滑的轮播没有响应(并且比页面更宽)

Question

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

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

我之前曾尝试使用OWL Carousel，但最终遇到了同样的问题(以及其他问题)。你们中有人知道这可能是什么吗？

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

另一个编辑:在我的屏幕 (1280px) 中，光滑轨道的宽度是 6000px。当我开始减小屏幕宽度时，这个数字也会减小，直到屏幕达到 963px，然后这个数字跳到 7200px 并变得比外部 div 更宽。Slick-track 位于轮播的 div 内，即以下 div 内:content、wrapper、body 和 html。我刚刚把所有东西都放在了 fiddle 中:/pris0213/ovov7xwx/。请注意，包装器的最大宽度为 1500px；这是当屏幕变小时(962 像素或更小)时 div 获得的宽度。

Answer 1

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

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

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

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