光滑的旋转木马向左箭头隐藏

Question

我在网站上使用 slick carousel。右箭头显示良好。

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

您可以在线查看问题：carryall.fr

我检查了这个问题：Why Bootstrap's Carousel left arrow throws errors while the right one works fine? 但它似乎不是同一个问题。

这是我的 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>

提前致谢

Answer 1

检查您的 Z-index。按钮上设置的不够高，所以在图片后面。

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

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

右箭头可见而左箭头隐藏的原因是 html 行的顺序。

它是：左键、图片、右键

这就是它在屏幕上的分层方式，导致图片覆盖左侧按钮。 Z-Index 让您可以通过说明按钮应显示在 Z 轴上其他层的上方来解决此问题。

更新：

参考评论中的第二个问题，您不能select幻灯片中的文字：

问题是 CSS3 规则禁用文本 selection。 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 文件删除这些行。

光滑的旋转木马向左箭头隐藏

Slick Carousel Left Arrow hidden

html

css

carousel

css-shapes