Slick synchro

HTML

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  </head>

  <body>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <div id="box">
    
    <div class="slick">
      <img src="https://picsum.photos/200/300" alt="">
      <img src="https://picsum.photos/200/301" alt="">
      <img src="https://picsum.photos/200/302" alt="">
      <img src="https://picsum.photos/200/303" alt="">
    </div>

    <div class="slick">
      <img src="https://picsum.photos/200/304" alt="">
      <img src="https://picsum.photos/200/305" alt="">
      <img src="https://picsum.photos/200/306" alt="">
      <img src="https://picsum.photos/200/307" alt="">
    </div>

    <div class="slick">
      <img src="https://picsum.photos/200/308" alt="">
      <img src="https://picsum.photos/200/309" alt="">
      <img src="https://picsum.photos/200/310" alt="">
    </div>
    
</div>
  </body>

</html>

CSS

.slick{
  margin: 0 auto;
  max-width: 200px;
}

JavaScript

$(document).ready(function(){
  $('.slick').slick({
    slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
    arrows: false,
    pauseOnHover: false
  });
});