Slick Slider Autoplay not Working

Question

I have implemented slick slider for my webpage. The swiping works just fine, and the images show one after the other. The only problem I'm having is getting the slider to initiate autoplay when the page finishes loading.

Here's link to my page.

HTML

<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>

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,
  });
});

Answer 1

Your problem is that you are not setting autoplay on your .single-item

If you change your JavaScript to the below code, it will work:

<script type="text/javascript">
    $(document).ready(function(){
      $('.single-item').slick({
          draggable: true,
          autoplay: true, /* this is the new line */
          autoplaySpeed: 2000,
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          touchThreshold: 1000,
      });
    });
</script>