I recently added the slick slider to my website. The swiping functionality is working smoothly, and the images are displaying one after another without any issues. However, I'm struggling to set up the slider to automatically start playing when the page finishes loading.
You can view my webpage here.
Here's a snippet of the HTML code:
<div class="single-item insideslideshow slider autoplay slickplay">
<div class="eachsliderimage" style="background-image: url('images/real-estate/2.jpg');"></div>
<div class="eachsliderimage" style="background-image: url('images/real-estate/1.jpg'); "></div>
<div class="eachsliderimage" style="background-image: url('images/real-estate/3.gif'); "></div>
<div class="eachsliderimage" style="background-image: url('images/real-estate/4.jpg'); "></div>
</div>
And here's the JavaScript code:
<script type="text/javascript">
$(document).ready(function(){
$('.single-item').slick({
draggable: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
touchThreshold: 1000,
});
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
Feel free to take a look!