光滑轮播：光滑轮播内部的按钮可以覆盖轮播？答案

【问题标题】：Slick Carousel: buttons inside of slick carousel that can overlay the carousel?光滑轮播：光滑轮播内部的按钮可以覆盖轮播？
【发布时间】：2015-08-11 10:25:51
【问题描述】：

所以基本上我想用 Slick 做类似的事情......我想要普通的幻灯片，但问题是，我想要在其中有号召性用语（按钮）。这通常很容易将按钮与幻灯片一起放入，但有一个溢出：轮播上的隐藏样式无法移除，否则其他幻灯片会显示。我想知道如何实现这一点（按钮略微向外而不被切断）。

编辑：为轮播添加了边框，这是我遇到的真正问题...维护边框并使底部与边框重叠

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

HTML

    <div class="slick__slide-cta">
      <button>example</button>
    </div>
  </div>
</div>

CSS

.slick__slide-cta {
  height: 40px;
  margin-top: -20px;
}

不完全是这样，但想法是让 CTA 区域与图像或其他任何内容重叠，同时仍然有助于幻灯片的整体高度。有点难以解释，在小提琴中显示会更容易。

【讨论】：

【解决方案2】：

这可以通过向 .slick-list 类添加填充底部来实现，如下所示：

.myslider .slick-list {
  padding-bottom: 15px;
}

填充底部将是按钮的一半的 px 值，它正在被覆盖。这是有效的，因为它增加了具有overlay:hidden 属性的.slick-list 容器的高度。

【讨论】：