Slick Carousel arrows do not appear and work as they ought to

Question

I am using http://kenwheeler.github.io/slick/ but can't seem to get it working as it ought to. Upon running the code below, I can see that the CSS and js files are loaded but not reflected. e.g there are no arrows.

Is there something i might be doing wrong(note: slick CSS and js files, as well as the html file are all located within the same folder

<html>

<head>

<link rel="stylesheet" type="text/css" href="../Slick/slick.css" />

</head>


<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="../Slick/slick.min.js"></script>    

<h2>title</h2>

<script type="text/javascript">



 $(document).ready(function(){

        $('.single-item').slick();

        });
     });
</script>

<div>
    <div class="single-item">
        <div > <img src="../Slick/F1.jpg" alt="bkj"></div>
        <div > <img src="../Slick/F1.jpg" alt="bkj"></div>
        <div > <img src="../Slick/F1.jpg" alt="bkj"></div>
    </div>
</div>

</body>

</html>

Does the validated answer in https://stackoverflow.com/questions/28998536/slick-slider-next-arrows-not-showing/28999095 could help? — probaPerception, Jun 20 '18 at 14:07

score 76 · Answer 1 · edited Feb 09 '15 at 09:32

76

it's because the arrow are white by default, so on the white page you can not see it.

be sure that the arrows are enabled:

 $('.single-item').slick({
arrows: true
    });

add the css code to see:

<style>
.slick-prev:before, .slick-next:before { 
    color:red !important;
}
</style>

edited Feb 09 '15 at 09:32

Community

1
1

answered Jul 24 '14 at 12:02

Intuitisoft

1,390
1
9
18

Or body { background-color:lightgray; } , you will see the arrows. – code-8 Mar 25 '15 at 19:40
try having a higher z-index to the buttons (can find them if you inspect your page) – Giridhar Karnik Apr 22 '17 at 14:16
1

This solution and the padded container to create space for the arrows worked for me. Didn't need that !important on the color. – George Beier Feb 07 '19 at 15:17

score 19 · Answer 2 · answered Apr 07 '15 at 21:59

For me it worked after adding the slick carousel inside of a wrapper <div class="content"> ... </div> that is a bit smaller to have the space for the prev/next button outside of the wrapper.

The follwoing CSS is working for me:

.content {
    margin: auto;
    padding: 20px;
    width: 80%;
}

I've also used normalize.css to get the centering of the prev/next buttons correctly. With-out normalize the centering was not perfect.

$('.slickslide').slick({
                dots: true,
                infinite: true,
                speed: 500,
                autoplay: true,
                slidesToShow: 1,
                slidesToScroll: 1});

.slickslide {
    height: 200px;
    background: lightgray;
}
body {
    background-color: lightblue;
}
.content {
    margin: auto;
    padding: 20px;
    width: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.css" rel="stylesheet"/>
<div class="content">
        <div class="slickslide" slick="">
            <div>Syling of left and right arrow is OK now. Required normalize.css and a content wrap around the slickslide with a smaller width.</div>
            <div>your content2</div>
            <div>your content3</div>
        </div>
    </div>

score 14 · Answer 3 · answered Oct 07 '14 at 09:38

14

I have the same problem, and I found out it is just out of the .single-item divsion, and this my solution

<style>
.slick-prev {
    margin-left: 40px;
  }

  .slick-next {
    margin-right: 40px;
  }
</style>

it just works for me

answered Oct 07 '14 at 09:38

Eugene Wang

469
1
5
11

1

Sorry to bump on this old item. But I have the same problem. Your solution does work in bringing the arrows back inside the DIV. Yet only the right arrow is showing. The left arrow seems hidden behind the image. Do both arrows show in your case ? – Maxence Jun 01 '16 at 21:19
1

hope this helps someone else out there, i managed to get it showing using Eugene's code by adding z-index:3; for both prev and next – Winona Jul 06 '17 at 13:36

score 3 · Answer 4 · answered Apr 28 '14 at 12:35

I have just tried your code and it seems all ok, the problem should deal with the page layout.

You can try with these options to check if the carousel is playing right

$(document).ready(function(){
    $('.single-item').slick({
        autoplay:true,
        autoplaySpeed: 1000
    });
});

And then you should just add some css rules to see arrows, just for example:

<style>
    body{
        background: green;
    }

    .single-item{
        margin-left: 10%;
        margin-right: 10%;
    }
</style>

score 3 · Answer 5 · answered Oct 22 '16 at 04:45

Make sure to add the following css to your styling this is from demo by default in the slick/index.html file.

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}
</style>

score 3 · Answer 6 · answered Apr 17 '20 at 16:14

You must give the previous/next control foreground color and make spaces at the left and right of the carousel list for previous/next control to appear inside your container.

Here the css:

.slick-prev::before,
.slick-next::before {
    color: rgba(0, 0, 0, 0.2);
    font-size: 2.5rem;
}

.slick-prev,
.slick-next {
    width: 2.5rem;
    height: 2.5rem;
    z-index: 2;
}

.slick-list {
    width: 95%;
    margin: 0 auto;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

Here is the result:

score 2 · Answer 7 · answered Jan 03 '17 at 19:55

2

This may happen if you use the sample code provided, which only includes three content divs. As soon as I added two more content divs, the arrows, dots, and autoplay were initialized.

answered Jan 03 '17 at 19:55

devdrc

1,853
16
21

Siraris · Answer 8 · 2017-10-03T16:41:34.570

1

So none of the answers above do anything, and most are innacurate. I have inspected my DOM, and the buttons for one of my carousels are not even there, which is why they are not displaying (not because the background is white). I have another carousel with the same settings, and the arrows show fine. Still trying to investigate this and will update if I find a solution.

Solution: It seems that for my issue, you need to have a container div wrapping the div that you apply slick to. Otherwise, it wont' work.

edited Oct 03 '17 at 16:41

answered Oct 03 '17 at 16:11

Siraris

1,088
3
13
21

Yes, you must add css `.slick-arrow:before { color: red; }` – Alex78191 Jun 23 '22 at 16:51

score 1 · Answer 9 · answered Apr 23 '19 at 10:32

1

What solved my issue is that they had not proper z-index

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

solved the issue

answered Apr 23 '19 at 10:32

Dulara Malindu

1,477
4
18
37

score 0 · Answer 10 · edited Apr 08 '22 at 01:43

0

this worked for me if it appears but not disabled

.slick-prev {
  z-index: 1;
}

edited Apr 08 '22 at 01:43

bguiz

27,371
47
154
243

answered Apr 07 '22 at 18:03

Moeed Elahi

1

Slick Carousel arrows do not appear and work as they ought to

10 Answers10