Slick Slider z-index 问题

Question

我正在使用光滑的滑块，并用它创建了以下自定义布局。

我现在要做的是将文本和按钮放在幻灯片顶部，用户可以高亮显示或点击。在搜索这个问题时，我遇到了this post，我关注并添加了

position: relative;

致幻灯片的主类my_slider 和单个幻灯片slick-slide

但是，这对我不起作用。所以我所做的是将z-index:1 添加到slick-slide 类和z-index: 2; 到按钮。但这也不起作用。我不确定我做错了什么。

我在小提琴中重新创建了这个问题 https://jsfiddle.net/kf6ohz98/3/

Answer 1

在添加this feature request 之前，您可以使用以下解决方案。

为了突出显示文本，您可以从 actual slick.css 文件中的.slick-slider{...} 中删除以下样式。

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

或者可以使用 您的 css 文件中的以下代码覆盖它。

.slick-slider{
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

现在您需要使用下面的方法重置.my_slider 中的translate3d(0, 0, 0);，

.slick-slider .slick-list {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

另外，请注意，由于第二个原因，按钮单击和突出显示不起作用，因为.slider-nav-thumbnails 与.my_slider 重叠。

要摆脱这种情况，您可以将z-index: 1; 设置为.my_slider，因为它已经定位为relative。

JSFIDDLE

希望这会有所帮助。