Menu
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> 
796
A slideshow component for cycling through elements—images or slides of text—like a carousel.
To turn on arrows in Slider Revolution, go to Navigation > Arrows and switch Arrow Type to ON. There are several default arrow styles. To change the look of your arrows styling, check out the Arrow Style dropdown to see what options are available.
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> 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
