Craft CMS carousel component

carousel.js

import Flickity from 'flickity'

export default function carousel() {
  const carousels = Array.from(document.querySelectorAll('[data-carousel]'))

  if (carousels.length < 1) {
    return
  }

  // Support equal height cells
  // reference: https://codepen.io/desandro/pen/ZXEGVq?editors=1010
  Flickity.prototype._createResizeClass = function () {
    this.element.classList.add('flickity-resize')
  }

  Flickity.createMethods.push('_createResizeClass')

  const resize = Flickity.prototype.resize
  Flickity.prototype.resize = function () {
    this.element.classList.remove('flickity-resize')
    resize.call(this)
    this.element.classList.add('flickity-resize')
  }

  carousels.forEach(carousel => {
    const carouselDots = carousel.hasAttribute('data-carousel-dots')
    const carouselItems = carousel.querySelector('[data-carousel-items]')
    const carouselGroupCells = carouselItems.getAttribute('data-carousel-items')
    const carouselNext = carousel.querySelector('[data-carousel-next]')
    const carouselPrev = carousel.querySelector('[data-carousel-prev]')

    const flkty = new Flickity(carouselItems, {
      pageDots: true,
      groupCells: carouselGroupCells,
      contain: true,
      prevNextButtons: false
    })

    if (carouselNext && carouselPrev) {
      // Custom previous/next buttons
      carouselNext.addEventListener('click', () => flkty.next())
      carouselPrev.addEventListener('click', () => flkty.previous())

      // Previous and next disable/enable
      flkty.on('select', () => {
        if (!flkty.cells[flkty.selectedIndex - 1]) {
          carouselPrev.setAttribute('disabled', '')
          carouselNext.removeAttribute('disabled')
        } else if (flkty.selectedIndex == [flkty.slides.length - 1]) {
          carouselNext.setAttribute('disabled', '')
          carouselPrev.removeAttribute('disabled')
        } else {
          carouselNext.removeAttribute('disabled')
          carouselPrev.removeAttribute('disabled')
        }
      })
    }
  })
}

carousel.scss

// ==========================================================================
// COMPONENTS/CAROUSEL
// ==========================================================================


.c-carousel {
  position: relative;
  max-width: 1000PX;
  margin-right: auto;
  margin-left: auto;

  & + .c-carousel {
    padding-top: 100px;
  }
}

.c-carousel__header {
  position: relative;
  margin-bottom: 80px;
  text-align: center;
}

.c-carousel__title {
  font-size: 2.5rem;
  letter-spacing: -1px;
}

.c-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.c-carousel__nav-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  border: none;
  cursor: pointer;

  circle {
    transition: all ease-in-out 0.2s;
  }

  &[disabled] {
    cursor: default;

    circle {
      fill: #eee;
    }
  }

}

.c-carousel__items {
  position: relative;

  &[data-carousel-items='1'] .c-carousel__item {
    width: 100%;
  }

  &[data-carousel-items='2'] .c-carousel__item {
    width: calc((100% - 30px) / 2);
  }

  &[data-carousel-items='3'] .c-carousel__item {
    width: calc((100% - 40px) / 3);
  }

  &[data-carousel-items='4'] .c-carousel__item {
    width: calc((100% - 60px) / 4);
  }
}

.c-carousel__item {
  display: flex;
  margin-right: 20px;
}

carousel.twig

<section class="c-carousel" data-carousel {% if pageDots|default(1) %}data-carousel-dots{% endif %}>
  <header class="c-carousel__header">
    <h2 class="c-carousel__title">{{ title }}</h2>
    <nav class="c-carousel__nav">
      <button class="c-carousel__nav-item" data-carousel-prev disabled>
        <svg width="31" height="31" viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#7203E3" cx="15.8" cy="15.4" r="15"/><path d="M15.068 8.788a.566.566 0 0 1 .426-.195h4.396c.23 0 .443.142.532.337a.546.546 0 0 1-.107.62l-5.548 5.85 5.548 5.868c.16.16.195.39.107.602a.565.565 0 0 1-.532.337h-4.396c-.16 0-.32-.07-.426-.177l-5.797-6.24a.57.57 0 0 1 0-.762l5.797-6.24z" fill="#FFF"/></g></svg>
      </button>

      <button class="c-carousel__nav-item" data-carousel-next>
        <svg width="31" height="31" viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(-180 15.5 15.5)" fill="none" fill-rule="evenodd"><circle fill="#7203E3" cx="15.8" cy="15.4" r="15"/><path d="M15.068 8.788a.566.566 0 0 1 .426-.195h4.396c.23 0 .443.142.532.337a.546.546 0 0 1-.107.62l-5.548 5.85 5.548 5.868c.16.16.195.39.107.602a.565.565 0 0 1-.532.337h-4.396c-.16 0-.32-.07-.426-.177l-5.797-6.24a.57.57 0 0 1 0-.762l5.797-6.24z" fill="#FFF"/></g></svg>
      </button>
    </nav>
  </header>

  <div class="c-carousel__items" data-carousel-items="{{ groupCells|default(1) }}">
    {% block items %}{% endblock %}
  </div>
</section>

index.twig

{% embed '_components/carousel' with {
  title: 'Latest Posts',
  groupCells: 1
} %}
  {% block items %}
    <div class="c-carousel__item">
      {% include '_components/quote' %}
    </div>

    <div class="c-carousel__item">
      {% include '_components/quote' %}
    </div>

    <div class="c-carousel__item">
      {% include '_components/quote' %}
    </div>

    <div class="c-carousel__item">
      {% include '_components/quote' %}
    </div>

    <div class="c-carousel__item">
      {% include '_components/quote' %}
    </div>

    <div class="c-carousel__item">
      {% include '_components/quote' %}
    </div>
  {% endblock %}
{% endembed %}

thanks