homepage-carousel.js

import Siema from 'siema'

import Module from './module'

export default class HomepageHero extends Module {
  constructor (el) {
    super(el)

    this.els = {
      el,
      slidesContainer: this.getContextElement(`.${this.className}_Slides`),
      slides: this.getContextElements(`.${this.className}_Slide`),
      dotsContainer: this.getContextElement(`.${this.className}_Dots`),
      dots: this.getContextElements(`.${this.className}_Dot`)
    }

    this.carousel = null

    this.initialiseCarousel()
  }

  initialiseCarousel () {
    const _this = this

    this.carousel = new Siema({
      selector: this.els.slidesContainer,
      loop: true,
      onChange () {
        const carousel = this

        _this.els.dots.forEach((dot, index) => {
          dot.setAttribute(
            'aria-current',
            String(index === carousel.currentSlide)
          )
        })
      }
    })

    this.els.dotsContainer.addEventListener('click', e => {
      if (e.target.matches(`.${this.className}_Dot`)) {
        this.carousel.goTo(this.els.dots.findIndex(dot => dot === e.target))
      }
    })

    return this.carousel
  }
}