Slick Slider Autoplay

Question

I’m mounting a Slick Slider with 4 images, however, it loads all images on screen and does not autoplay Slick alone.

JS:

$('.single-item').slick({
slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  responsive: 
  [
  {
      breakpoint: 600,
      settings: {
          infinite: true,
          arrows: true,
          slidesToShow: 2
      }
  },
  {
      breakpoint: 480,
      settings: {
          infinite: true,
          arrows: true,
          slidesToShow: 1
      }
  }
  ]
  });

HTML:

<div class="single-item logos col-12">

 <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/bradesco.png" alt="">
 </div>


 <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/ole.png" alt="">
 </div>

  <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/pan.png" alt="">
  </div>

  <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/banrisul.jpg" alt="">
  </div>

  <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/itau.png" alt="">
  </div>

  <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/safra.png" alt="">
  </div>

  <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/votorantim.png" alt="">
  </div>

  <div class="logo"><img src="<?php echo INCLUDE_PATH; ?>/images/site/bic.png" alt="">
  </div>
  </div>
  </div>
  </div>

CSS:

.logos{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}

.logos .logo{
height: 150px;
background-size: cover !important
}

.logos .logo img {
height: 100px;
width: 150px
}

Answer 1

You are probably starting the plugin before loading the slider’s HTML. With this the plugin does not find the div .single-item and all the slider images are displayed on the screen.

You need to check the order in which things are loaded. If this is the case, you can enter the code that initializes the plugin within the event .ready, where the plugin initialization will only be executed after the DOM loading:

$(document).ready(function(){

   // inicie o plugin aqui!

});

See how it works:

.logos{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}

.logos .logo{
height: 150px;
background-size: cover !important
}

.logos .logo img {
height: 100px;
width: 150px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" rel="stylesheet"/>

<script>
$(document).ready(function(){
   $('.single-item').slick({
   slidesToShow: 4,
   slidesToScroll: 1,
   autoplay: true,
   autoplaySpeed: 2000,
   responsive: 
   [
   {
      breakpoint: 600,
      settings: {
          infinite: true,
          arrows: true,
          slidesToShow: 2
      }
   },
   {
      breakpoint: 480,
      settings: {
          infinite: true,
          arrows: true,
          slidesToShow: 1
      }
   }
   ]
   });
});
</script>
<div class="single-item logos col-12">

 <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
 </div>


 <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
 </div>

  <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
  </div>

  <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
  </div>
  <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
  </div>
  <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
  </div>
  <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
  </div>
  <div class="logo"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
  </div>

  </div>

The loading order of libraries/HTML:

• jQuery
• Plugin
• HTML
• Script that starts the plugin

If you’re going to use the .ready, can be:

• jQuery
• Script that starts the plugin (inside the .ready)
• Plugin
• HTML

Or:

• jQuery
• Plugin
• Script that starts the plugin (inside the .ready)
• HTML

Or even:

• jQuery
• Script that starts the plugin (inside the .ready)
• HTML
• Plugin

Or else:

• jQuery
• HTML
• Plugin
• Script that starts the plugin

See that jQuery always comes first.