Search code examples
htmlcsscarouselcss-shapes

Slick Carousel Left Arrow hidden

I use slick carousel on a web site. The right arrow is well displayed.

My problem is that the left arrow is hidden.

You can see the problem online at : carryall.fr

I checked this question : Why Bootstrap's Carousel left arrow throws errors while the right one works fine? but it does not seem to be the same issue.

Here is my html structure :

<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>

Thanks in advance

Solution

  • Check your Z-index. It's not set high enough on the button, so it is behind the picture.

    In your CSS file, find where the styles are for the next and prev buttons, and add a Z-index.

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

    The reason the right arrow is visible, but the left one is hidden, is because of the order of your html lines.

    It goes: Left Button, Picture, Right Button

    So that is how it is layered on the screen, which causes the picture to cover the left button. Z-Index lets you fix that by saying the buttons should appear above the other layers on the Z-axis.

    Update:

    In reference to your second question from the comments, where you cannot select the text in the slides:

    The issue is the CSS3 rule to disable text selection. user-Select, -moz-user-select, -ms-user-select, or -webkit-user-select. Based on the browser.

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

    You need to remove those lines for your CSS file.