Slick轮播左箭头隐藏。

Question

我在一个网站上使用了Slick Carousel插件。右箭头正常显示。

我的问题是左箭头被隐藏了。

您可以在以下链接中在线查看问题：carryall.fr

我查看了这个问题：为什么Bootstrap的轮播图左箭头会出现错误而右箭头却正常工作？，但似乎不是同样的问题。

这是我的HTML结构：

<div class="container-fluid">
    <div class="ca_slider">
        <div><a href='{root_url}' title='{sitename}'><img src='{uploads_url}/images/slideshow02.jpg'  alt='{sitename}' /></a></div>
        <div><a href='{root_url}' title='{sitename}'><img src='{uploads_url}/images/slideshow03.jpg'  alt='{sitename}' /></a></div>
    </div>
</div>

提前致谢

- JoeDoe

Answer 1

请检查您的Z-index。按钮上的Z-index不够高，因此它在图片后面。

在您的CSS文件中，找到下一个和上一个按钮的样式，并添加一个Z-index。

.slick-prev, .slick-next {
    ....     
    z-index:999;
}

右箭头可见，而左箭头被隐藏的原因是由于你的html行的顺序。它是这样排列的：左按钮、图片、右按钮。所以它在屏幕上的层次结构就是这样，这导致图片覆盖了左按钮。Z-Index让你可以通过声明按钮应该出现在Z轴上的其他层次之上来解决这个问题。

更新：关于你在评论中提到的第二个问题，即无法选择幻灯片中的文本：

问题在于CSS3规则禁用文本选择。根据浏览器不同，有user-Select、-moz-user-select、-ms-user-select或-webkit-user-select。

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

您需要在CSS文件中删除这些行。

- Daniel Congrove