Examples

Mount a carousel

<div
  class="car-Products"
  data-module="products-carousel"
  data-products-carousel-ready-class="car-Products-ready"
  data-products-carousel-products-per-slide="{{ section.settings.amount_to_show }}"
>
  <div
    class="car-Products_Slides keen-slider"
    data-el="products-carousel.slides"
  >
    {%- for block in section.blocks -%}
      {%- assign product = all_products[block.settings.product] -%}
  
      {%- if product -%}
        <div
          class="car-Products_Slide keen-slider__slide"
          data-el="products-carousel.slide"
        >
          {%- render 'product-card',
            product: product,
            content_style: section.settings.content_style
          -%}
        </div>
      {%- endif -%}
    {%- endfor -%}
  </div>

  <div class="car-Products_Controls" data-el="products-carousel.controls">
    <button
      type="button"
      class="car-Products_Control car-Products_Control-previous"
      data-el="products-carousel.previous"
    >
      {%- render 'bao-arrow-left' -%}
    </button>

    <button
      type="button"
      class="car-Products_Control car-Products_Control-next"
      data-el="products-carousel.next"
    >
      {%- render 'bao-arrow-right' -%}
    </button>
  </div>
</div>

import { Module } from '@by-association-only/theme-module'
import { getElement } from '@by-association-only/theme-utils'
import KeenSlider from 'keen-slider'

export default class extends Module {
  static methods = ['handlePreviousClick', 'handleNextClick']
  static targets = ['slides', 'slide', 'controls', 'previous', 'next']

  slider = null

  initialize () {
    super.initialize()

    this.initializeSlider()
  }

  setupListeners () {
    if (this.hasPreviousEl) {
      this.listeners.add(this.previousEl, 'click', this.handlePreviousClick)
    }

    if (this.hasNextEl) {
      this.listeners.add(this.nextEl, 'click', this.handleNextClick)
    }
  }

  handlePreviousClick () {
    this.slider.prev()
  }

  handleNextClick () {
    this.slider.next()
  }

  destroy () {
    this.destroySlider()
  }

  initializeSlider () {
    if (!this.hasSlidesEl) return

    this.slider = new KeenSlider(this.slidesEl, {
      slidesPerView: this.numberOfSlidesToShow,
      loop: true,
      duration: 1000,
      spacing: 30,
    })

    this.element.classList.add(this.data.get('readyClass'))
  }

  destroySlider () {
    this.slider && this.slider.destroy()
  }

  get activeDotClass () {
    return this.data.get('activeDotClass')
  }

  get numberOfSlidesToShow () {
    return parseInt(this.data.get('productsPerSlide'))
  }
}