<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

<?php
include 'includes/db.php';
?>
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <?php
    $sql = "SELECT * FROM clients ORDER BY id DESC";
    $result = $conn->query($sql);
    while ($row = $result->fetch_assoc()) {
        echo '
        <div class="swiper-slide">
            <img src="images/clients/' . htmlspecialchars($row['logo']) . '" alt="' . htmlspecialchars($row['name']) . '" style="width:150px; height:auto;">
        </div>';
    }
    ?>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

<script>
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 5,
  spaceBetween: 20,
  loop: true,
  autoplay: {
    delay: 2000,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});
</script>


<style type="text/css">
    .swiper {
  width: 100%;
  padding: 30px 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  max-height: 80px;
  filter: grayscale(20%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.swiper-slide img:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}

</style>