Slick Carousel arrows do not appear and work as they ought to
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>
Answer
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>