product-carousel.js

import $ from 'jquery';
import Swiper, { Autoplay } from 'swiper';
Swiper.use([Autoplay]);

const selectors = {
  slideshow: '[data-slideshow]',
  slideshowSlide: '[data-slideshow-slide]'
};

const classes = {
  swiperDuplicateSlide: '.swiper-slide-duplicate'
}

class ProductCarousel extends HTMLElement {
  constructor() {
    super();

    this.$container = $(this);
    this.$slideshow = $(selectors.slideshow, this.$container);

    this.swiperOptions = {
      loop: false,
      speed: 500,
      spaceBetween: Number.parseInt(this.$slideshow.data('space-between')) || 10,
      slidesPerView: Number.parseInt(this.$slideshow.data('slides-to-show')) || 1.2,
      slidesPerGroup: Number.parseInt(this.$slideshow.data('slides-to-scroll')) || 1,
      breakpoints: {
        // when window width is >= 640px
        1024: {
          slidesPerView: Number.parseInt(this.$slideshow.data('slides-to-show')) || 5,
          slidesPerGroup: Number.parseInt(this.$slideshow.data('slides-to-scroll')) || 1,
          loop: false
        }
      }
    };

    if (this.$slideshow.data('autoplay')) {
      this.swiperOptions.autoplay = {
        delay: Number.parseInt(this.$slideshow.data('speed')) || 5000
      };
    }

    if (this.$slideshow.data('transition-speed')) {
      this.swiperOptions.speed = this.$slideshow.data('transition-speed') || 1000;
    }

    const leftBtn = this.$slideshow.data('custom-left');
    if(leftBtn){
      $(document).on('click', `.${leftBtn}`, this.onLeftBtnClick.bind(this));
    }

    const rightBtn = this.$slideshow.data('custom-right');
    if(rightBtn){
      $(document).on('click', `.${rightBtn}`, this.onRightBtnClick.bind(this));
    }

    // only initialize the slideshow if there is more than one slide
    if (this.$slideshow.find(`${selectors.slideshowSlide}:not(${classes.swiperDuplicateSlide})`).length > 1) {
      // initialize swiper
      this.swiper = new Swiper(this.$slideshow.get(0), this.swiperOptions);
    }

    // Initialize Swiper
    this.swiper = new Swiper(this.$slideshow.get(0), this.swiperOptions);

    // Register theme editor events
    $(document)
      .on('shopify:section:load	', this.onLoad.bind(this))
      .on('shopify:section:unload	', this.onUnload.bind(this))
      .on('shopify:section:select', this.onSectionSelect.bind(this))
      .on('shopify:section:deselect', this.onSectionDeselect.bind(this))
      .on('shopify:section:reorder', this.onSectionReorder.bind(this))
      .on('shopify:block:select', this.onBlockSelect.bind(this))
      .on('shopify:block:deselect', this.onBlockDeselect.bind(this));
  }

  onLeftBtnClick() {
    this.swiper.slidePrev(this.swiperOptions.speed);
  }

  onRightBtnClick() {
    this.swiper.slideNext(this.swiperOptions.speed);
  }


  // Theme Editor section events below
  // ==============================================

  onLoad(e) {
    this.swiper.destroy()
    this.swiper = new Swiper(this.$slideshow.get(0), this.swiperOptions);
  }
  onUnload(e) {

  }
  onSectionSelect(e) {

  }
  onSectionDeselect(e) {

  }
  onSectionReorder(e) {

  }

  onBlockSelect(e) {

    const $blockSlide = this.$slideshow.find(`[data-block-id="${e.detail.blockId}"]`);

    if ($blockSlide.length === 0) {
      return;
    }
  }

  onBlockDeselect(e) {
  }

}

customElements.define('product-carousel', ProductCarousel);