圆滑旋转木马:圆滑旋转木马内部的按钮可以覆盖旋转木马？

Question

​

​

所以基本上我想用Slick来做这样的事情...我想要有普通的幻灯片，但问题是，我想在它们里面有行动的调用(按钮)。这通常很容易将按钮与幻灯片放在一起，但有一个溢出:旋转木马上的隐藏样式无法取下，否则其他幻灯片就会显示出来。我想知道我如何才能做到这一点(按钮稍微向外移动而不被切断)。

编辑:添加边框旋转木马，这是真正的问题，我有…维护边框并使底部显示为与边框重叠

Answer 1

HTML

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

CSS

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

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

Answer 2

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

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

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