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

Solution 1:

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>

Solution 2:

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>

Solution 3:

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

Solution 4:

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>

Solution 5:

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>