光滑的滑块图像重叠和破碎的按钮

Question

我正在尝试在编码之后多年重新学习一些CSS。我试图手动重新创建一个wordpress模板，并且图像滑块出现问题。

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

左箭头和右箭头的图像是否被打破，滑块下方的点是否有任何建议？

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

Answer 1

您的问题并不完全清楚预期的行为。如果您想使图像与幻灯片一样宽，则需要设置min-width。例如：

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

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

.slick-slide img {
   margin: 0 50px;
}

要合并这两者，您必须使用margin从width中扣除calc：

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

请务必阅读slick文档。如果你不想成为＆＃34;惊讶＆＃34;通过重绘过程，您需要了解每个功能并按预期使用它。否则它将对你起作用，而且从经验来看，禁用内部光滑行为（不破坏其功能）并非易事。

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