Collection Circle

<div class="section-template">
  <div class="circle-slider-wrapper">
    <div class="swiper circle-slider preview">
      <div class="swiper-wrapper">

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="/products/snow-peak-titanium-single-wall-cup">
            <img src="//section.store/cdn/shop/products/mug.jpg?v=1663855357" alt="Mug">
          </a>
          <p class="circle-text">Mugs</p>
        </div>

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="/products/5-panel-hat">
            <img src="//section.store/cdn/shop/files/5-panel-hat_4ee20a27-8d5a-490e-a2fc-1f9c3beb7bf5.webp?v=1663859540" alt="Hat">
          </a>
          <p class="circle-text">Hats</p>
        </div>

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="/products/camp-stool">
            <img src="//section.store/cdn/shop/files/campstool-1.webp?v=1663859592" alt="Stool">
          </a>
          <p class="circle-text">Stools</p>
        </div>

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="/products/canvas-lunch-bag">
            <img src="//section.store/cdn/shop/files/Lunchbag_Khaki_Front_8ae0e1f4-407d-4ac0-89e6-961b306ef351.jpg?v=1663859624" alt="Bag">
          </a>
          <p class="circle-text">Bags</p>
        </div>

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="/products/foraker-canvas-coat">
            <img src="//section.store/cdn/shop/files/woolfill-jacket_6c39ae23-c0c8-4821-85f4-4b5d64333c62.webp?v=1663859701" alt="Jacket">
          </a>
          <p class="circle-text">Jackets</p>
        </div>

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="#">
            <img src="//section.store/cdn/shop/products/1_637c75a8-33f9-4c38-aebf-5a3dc31162dc.png?v=1706026914" alt="Throw">
          </a>
          <p class="circle-text">Throws</p>
        </div>

        <div class="circle-item swiper-slide">
          <a class="circle-icon" href="#">
            <img src="//section.store/cdn/shop/products/2_c196c504-dfa8-41e9-b151-1094c4962009.png?v=1706026914" alt="Rug">
          </a>
          <p class="circle-text">Rugs</p>
        </div>

      </div>
    </div>
  </div>
</div>

<!-- Styles -->
<style>
  /* General Styles */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body, html {
    height: 100%;
    margin: 0;
  }

  .section-template {
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh;  */
    /* background: #f9f9f9; */
    overflow: hidden;
  }

  .circle-slider-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 15px;
  }

  .swiper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .swiper-wrapper {
    display: flex;
    gap: 20px;
    padding: 10px;
    justify-content: center; 
  }

  .circle-item {
    flex: 0 0 auto;
    width: 140px; 
    text-align: center;
    scroll-snap-align: center;
  }

  .circle-icon {
    /* outline: 2px solid; */
    /* outline-color: linear-gradient(133deg, rgba(250, 220, 54, 1) 11%, rgba(254, 98, 146, 1) 49%, rgba(250, 220, 54, 1) 87%); */
    /* background-image: linear-gradient(133deg, rgba(250, 220, 54, 1) 11%, rgba(254, 98, 146, 1) 49%, rgba(250, 220, 54, 1) 87%); */
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #000;
    transition: transform 0.3s ease;
  }

  .circle-icon:hover {
    transform: scale(1.1);
  }

  .circle-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .circle-text {
    margin-top: 8px;
    font-size: 16px;
    color: #333;
    font-family: 'Josefin Sans', sans-serif;
  }

  /* Responsive Styling */
  @media screen and (max-width: 1200px) {
    .circle-item {
      width: 120px;
    }
    
    .circle-icon {
      width: 120px;
      height: 120px;
    }

    .circle-text {
      font-size: 14px;
    }
  }

  @media screen and (max-width: 992px) {
    .circle-item {
      width: 100px;
    }
    
    .circle-icon {
      width: 100px;
      height: 100px;
    }

    .circle-text {
      font-size: 12px;
    }
  }

  @media screen and (max-width: 768px) {
    .circle-item {
      width: 80px;
    }
    
    .circle-icon {
      width: 80px;
      height: 80px;
    }

    .circle-text {
      font-size: 11px;
    }
  }

  @media screen and (max-width: 576px) {
    .circle-item {
      width: 70px;
    }
    
    .circle-icon {
      width: 70px;
      height: 70px;
    }

    .circle-text {
      font-size: 10px;
    }
  }

  @media screen and (max-width: 480px) {
    .circle-item {
      width: 60px;
    }
    
    .circle-icon {
      width: 60px;
      height: 60px;
    }

    .circle-text {
      font-size: 9px;
    }
  }
</style>

<!-- Swiper JS -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const slider = document.querySelector('.swiper');
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
      isDown = true;
      slider.classList.add('active');
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
    });

    slider.addEventListener('mouseleave', () => {
      isDown = false;
      slider.classList.remove('active');
    });

    slider.addEventListener('mouseup', () => {
      isDown = false;
      slider.classList.remove('active');
    });

    slider.addEventListener('mousemove', (e) => {
      if (!isDown) return;
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 2;
      slider.scrollLeft = scrollLeft - walk;
    });
  });
</script>