Despite following the instructions on the official slick slider website, I am encountering an issue where the slider is not working as expected. Instead of sliding through the images, they are being displayed on top of each other.
Here is the code I have used:
Head elements
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
Body elements
<div class="col-sm-12">
<div class="autoplay">
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
<div><img src=".\slickpics\cookie1.png"></div>
</div>
</div>
Before body closing elements
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js" integrity="sha256-ycJeXbll9m7dHKeaPbXBkZH8BuP99SmPm/8q5O+SbBc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>
The javascript at the end
$(document).ready(function(){
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
});
});
I would greatly appreciate any help or suggestions regarding this issue. Thank you for your time.