光滑的滑块图像重叠和损坏的按钮

Posted 2023-02-25

【中文标题】光滑的滑块图像重叠和损坏的按钮

【英文标题】：Slick Slider Images Overlapping and Broken Buttons

【发布时间】：2017-03-18 09:47:29

【问题描述】：

在远离编码多年后，我正在尝试重新学习一些 CSS。我正在尝试手动重新创建一个 wordpress 模板，但图像滑块有问题。

我已经尝试了一些并选择了http://kenwheeler.github.io/slick/，但我的图像重叠存在问题。它们都是相同的尺寸，我在网上搜索过但找不到答案。

左右箭头的图像坏了，滑块下方的点也坏了，有什么建议吗？

我的网站在这里：http://rdoyle.info/temp/

【问题讨论】：

您能否在问题中发布代码并使用 JSFiddle（如果适用）

它没有重叠。我认为你需要的是 center:false 在你的光滑初始化代码中，你可能需要使用元标记将字符集设置为 utf-8 我希望

我确实更改了 centerMode: false，这似乎发生了重大变化，但图像并没有填满滑块的整个宽度，因此您一次可以看到两个图像。

我试图将所有内容都包含在一个 jsfiddle 中 jsfiddle.net/4tj9tzs4

【参考方案1】：

您的问题并不完全清楚预期的行为。如果你想让图片和幻灯片一样宽，你需要设置它们的min-width。例如：

.slick-slide img 
   min-width: 100%;

如果你想增加幻灯片之间的间距，你可以通过设置边距来实现。您可以将它们设置在幻灯片或其内容上。我个人更喜欢粘在一起的幻灯片，它可以让我更好地控制动画功能。这里的重点是 slick 会自动调整。例如：

.slick-slide img 
   margin: 0 50px;

要将两者结合起来，您必须使用calc 从width 中减去margins：

.slick-slide img 
  min-width: calc(100% - 100px);
  margin: 0 50px;

---

确保您阅读了slick 文档。如果您不想对其重绘过程感到“惊讶”，则需要了解每个功能并按预期使用它。否则它将对您不利，并且根据经验，禁用内部巧妙的行为（不破坏其功能）并非易事。

提示：设置视觉助手，让您能够看到您感兴趣的元素（我个人在构建动画时使用红色/白色/黑色 1px 元素边框，以便能够看看他们的行动）。

【讨论】：

我尝试使用类 slick-slider img 将其添加到我的 main.css 中，但对网站没有任何影响。你能给他们一些更多的信息或一个完整的例子吗，对不起，我对这一切都很陌生。

@DezUk，如果我使用开发控制台手动将最后一个 sn-p 添加到 main.css，图像是全宽（减去 100 像素）并居中。您要么没有保存更改，要么没有将它们上传到服务器上，或者没有清除缓存。你应该做所有这些才能看到变化......

虽然我的箭头现在没有正确显示，但帽子似乎确实有效

这可能是因为您在保存 CSS 文件时更改了它的编码。它必须与浏览器中声明的匹配，推荐值为utf-8。