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

Rallentando

Can you add the script you use for your slick slider please? – Entrance

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a Minimal, Complete, and Verifiable example (MCVE) that demonstrates your problem would help you get better answers. For more info, see Something on my web site doesn't work. Can I just paste a link to it? Thanks! – Eyecatching

@Eyecatching Thanks for the heads up. I posted some of the code, there is a lot of additional code in external css and script files. Let me know if I should find any of it and add it to the main post. – Rallentando

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>

Entrance

Hahaha @Gael, you are too quick ;) thanks for editing it out for me :) – Entrance

and the one who edited the question was more faster :) – Viole

@Entrance Why is it necessary to also include it in that section of the code? – Rallentando

@AlexBanman I've actually edited my answer. You were initiating slick slider twice. Once on an element called .single-item and once on an element called .autoplay. This is actually what slick use in their example, you had to make sure that the autoplay field was set to the single-item function because your site doesn't have a set of element called autoplay and you can actually remove that from the code :) – Entrance

If it helps you understand it even better, when you call $('.single-item').slick({ ........ }); you are actually telling your slick script that you are creating a slider from the children items of an element with the class single-item and that the parameters/settings are what you are including in between the curly brackets - does that help? – Entrance

Thanks for the clarification, I was puzzling over your last comment! I see what you mean now by calling it twice. I was telling the slick script that the relevant code was contained in the .single-item parameters, so it was ignoring the .autoplay code... is that right? I guess this code is a little bit advanced, experienced coders would know right away what to do there. I'm just throwing code around and hoping it will work out. – Rallentando

Hahaha I'm far from experienced, I just happen to play with slick every now and then, in the end, we all just play :) That's not exactly what happened, it's more that there was no element with the class .autoplay so it ignored the second initialization. Good luck with the rest! – Entrance

Ah, I see. That makes sense. Thanks again! – Rallentando