滑动旋转木马左箭头隐藏

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-指数。它没有设置得足够高，所以它在图片后面。

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

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

右箭头可见的原因，但左侧是隐藏的，是因为你的html行的顺序。

有云：左键，图片，右侧按钮

所以这是它是如何在屏幕上，这会导致画面覆盖左键上分层。 Z-Index可以让你通过说按钮​​应该出现在Z轴上的其他图层之上来解决这个问题。

---

更新：

从评论，在那里你不能在幻灯片中选择文本引用到你的第二个问题：

的问题是，CSS3规则禁用文本选择。用户选择，-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文件的这些行。