Question

我在网站上使用光滑的轮播。右箭头显示良好。

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

您可以在线查看问题：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轴上的其他图层上方来解决这个问题。

<强>更新

参考评论中的第二个问题，您无法选择幻灯片中的文字：

问题是禁用文本选择的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文件的那些行。

光滑的旋转木马左箭隐藏

1 个答案: