<!– Swiper CSS –>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css” />
<style>
  .swiper {
    width: 100%;
    padding: 40px 0;
  }
  .swiper-slide {
    background: #f5f5f5;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .review-photo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .review-stars {
    color: #FFD700;
    margin: 10px 0;
    font-size: 18px;
  }
  .review-text {
    font-size: 14px;
    color: #555;
    margin: 10px 0;
  }
  .review-name {
    font-weight: bold;
    margin-top: 10px;
  }
</style>
<!– Swiper HTML –>
<div class=”swiper”>
  <div class=”swiper-wrapper”>
    <div class=”swiper-slide”>
      <div class=”review-photo”><img src=”https://via.placeholder.com/300×200” /></div>
      <div class=”review-stars”>&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p class=”review-text”>My dog loves this cozy bed!</p>
      <div class=”review-name”>FRANK KING</div>
    </div>
    <!– Add more swiper-slide blocks here –>
  </div>
  <div class=”swiper-button-prev”></div>
  <div class=”swiper-button-next”></div>
  <div class=”swiper-pagination”></div>
</div>
<!– Swiper JS –>
<script>
  document.addEventListener(“DOMContentLoaded”, function () {
    new Swiper(“.swiper”, {
      loop: true,
      spaceBetween: 30,
      slidesPerView: 1,
      navigation: {
        nextEl: “.swiper-button-next”,
        prevEl: “.swiper-button-prev”,
      },
      pagination: {
        el: “.swiper-pagination”,
        clickable: true,
      },
      breakpoints: {
        768: {
          slidesPerView: 3,
        },
      },
    });
  });
</script>