Swipe Carousel

carousel.css

.carousel {
  position: relative;
}

.carousel__slider {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__slider::-webkit-scrollbar {
  width: 0 !important;
}

.carousel__slide {
  width: 100%;
  flex: none;
  scroll-snap-align: center;
}

.carousel__button {
  position: absolute;
  top: 50%;
  color: var(--color-light);
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  background: none;
  border: none;
}

.carousel__button:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>') no-repeat center / contain;
}

.carousel__button[data-mode='prev'] {
  left: 0;
  transform: rotate(180deg);
}

.carousel__button[data-mode='next'] {
  right: 0;
}

index.html

<swipe-carousel>
  <div class="carousel">
    <ul class="carousel__slider" role="list" data-carousel>
      <li class="carousel__slide" data-carousel-slide></li>
    </ul>

    <button class="carousel__button" data-mode="prev"></button>
    <button class="carousel__button" data-mode="next"></button>
  </div>
</swipe-carousel>

swipe-carousel.js

class SwipeCarousel extends HTMLElement {
  connectedCallback() {
    this.scroller = this.querySelector('[data-carousel]');
    this.elements = [...this.scroller.querySelectorAll('[data-carousel-slide]')];
    this.prevButton = this.querySelector('[data-mode="prev"]');
    this.nextButton = this.querySelector('[data-mode="next"]');
    this.activeIndex = this.getActive();

    this.addEvents();
  }

  getActive() {
    const first = this.elements.find((el) => {
      return el.offsetLeft >= this.scroller.scrollLeft;
    });

    if (first) {
      const index = this.elements.findIndex((e) => e === first);
      return index;
    }

    return null;
  }

  addEvents() {
    this.scroller.addEventListener('scroll', (e) => {
      this.activeIndex = this.getActive();
    });

    if (this.prevButton) {
      this.prevButton.addEventListener('click', () => {
        const element = this.elements[this.activeIndex - 1];

        if (element) {
          this.scroller.scrollTo({
            left: element.offsetLeft,
            behavior: 'smooth',
          });
        }
      });
    }

    if (this.nextButton) {
      this.nextButton.addEventListener('click', () => {
        const element = this.elements[this.activeIndex + 1];

        if (element) {
          this.scroller.scrollTo({
            left: element.offsetLeft,
            behavior: 'smooth',
          });
        }
      });
    }
  }
}
window.customElements.define('swipe-carousel', SwipeCarousel);