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之前，您可以采用以下解决方案。

要突出显示文字，您可以从实际 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;
}

现在您需要使用以下内容重置translate3d(0, 0, 0);中的.my_slider，

.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

希望这有帮助。