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

Posted 2023-05-07

【中文标题】光滑轮播：光滑轮播内部的按钮可以覆盖轮播？

【英文标题】：Slick Carousel: buttons inside of slick carousel that can overlay the carousel?

【发布时间】：2015-08-11 10:25:51

【问题描述】：

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

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

【参考方案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 容器的高度。