Logo Carousel dengan Flickity

<div class="logo_carousel">
  <!-- Slides -->
  <a class="logo_cell"  href="https://bookretreats.com/blog/my-serene-stay-at-the-samyama-mindfulness-meditation-center-in-ubud-bali/" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/Book-Yoga-Retreats.png"></a>

  <a class="logo_cell small_size"  href="https://www.allyogatraining.com/best-yoga-teacher-training-ubud" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/All-Yoga.png"></a>

  <a class="logo_cell small_size"  href="https://heartofyoga.com/" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/Heart-of-Yoga.png"></a>

  <a class="logo_cell"  href="https://bookretreats.com/blog/my-serene-stay-at-the-samyama-mindfulness-meditation-center-in-ubud-bali/" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/Book-Retreats.png"></a>

  <a class="logo_cell"  href="https://hridaya-yoga.com/all-programs-from-retreat-guru/3842/3-5-day-hridaya-silent-meditation-retreats-in-indonesia/" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/Hridaya-Yoga.png"></a>

  <a class="logo_cell med_size"  href="https://www.yogaalliance.org/SchoolPublicProfile?sid=15113" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/Yoga-Alliance.png"></a>

  <a class="logo_cell"  href="https://bookretreats.com/blog/my-serene-stay-at-the-samyama-mindfulness-meditation-center-in-ubud-bali/" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2023/12/The-Magger.png"></a>

  <a class="logo_cell"  href="#" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2024/03/yovada_logo-white.svg"></a>

  <a class="logo_cell"  href="#" target="_blank" rel="noopener"><img src="https://samyama.com/wp-content/uploads/2024/03/radarlistlogo-white.svg"></a>

</div>

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<script>
  jQuery(document).ready(function() {
    
  jQuery('.logo_carousel').flickity({
  // options
  freeScroll: false,
  wrapAround: true,
  content: true,
    pageDots:false,
    autoPlay:true,
    cellAlign:'left',
});
    });
</script>
<style>
  .logo_carousel {
    display:block;
    height:100px;
    padding:20px 50px;
    width:100%%;
  }
  
  .logo_cell {
    padding:0 20px;
    width:25%%;
    display:flex;
    height:60px;
  }
  
  .logo_cell img {
    height:auto;
    margin:auto;
    width:auto;
    max-height:60px;
  }
  
  .med_size {
    width:15%%;
  }
  
  .small_size {
    width:10%%;
  }
  
  @media (max-width:992px) {
    .logo_cell, .med_size, .small_size {
      width:33%%;
    }
  }
  
    @media (max-width:600px) {
    .logo_cell, .med_size, .small_size {
      width:50%%;
    }
  }
  
    @media (max-width:480px) {
    .logo_cell, .med_size, .small_size {
      width:100%%;
    }
  }
</style>