product-carousel.js

import Module from './module'
import Siema from 'siema'

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

    this.els = {
      el,
      slidesContainer: this.getContextElement(`.${this.className}_Slides`),
      slides: this.getContextElements(`.${this.className}_Slide`),
      controlsContainer: this.getContextElement(`.${this.className}_Controls`),
      prevControl: this.getContextElement(`.${this.className}_Control-prev`),
      nextControl: this.getContextElement(`.${this.className}_Control-next`),
      dotsContainer: this.getContextElement(`.${this.className}_Dots`)
    }

    this.carousel = null

    this.initialiseCarousel()
  }

  initialiseCarousel () {
    const _this = this

    if (this.els.slides.length <= 4) return

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

        _this.positionControls()

        _this.els.prevControl.addEventListener('click', () => carousel.prev(4))
        _this.els.nextControl.addEventListener('click', () => carousel.next(4))
      }
    })

    return this.carousel
  }

  positionControls () {
    const imageEl = this.getContextElement(`.prd-Card_ImageContainer img`)
    const imageHeight = imageEl.offsetHeight

    this.els.controlsContainer.style.top = `${imageHeight / 2}px`
  }
}