Example of slider component in class pattern, jquery + slick-carousel with Drupal.behaviors

Slider.js

import $ from 'jquery';
import 'slick-carousel';

class Slider {
  constructor(props) {
    this.selector     = props.selector;
    this.slide        = props.slide;
    this.key          = props.key;
    this.slickOptions = props.slickOptions;
    this.Drupal       = Drupal;
  }

  init() {
    const _this = this;

    this.Drupal.behaviors[this.key] = {
      attach(context) {
        const $sliders = $(_this.selector, context);

        _this.carousel($sliders);
      }
    }
  }

  carousel = $sliders => {
    if (!$sliders.length) {
      return;
    }

    const _this = this;
    
    $sliders.each(function () {
      $(this).slick({
        slide: _this.slide,
        // here general slick options go across all sliders
        ..._this.slickOptions
      });
    });
  }
}

export default Slider;

slider.js

import Slider from '../shared/Slider';

const sliderOptions = {
  selector: '.js-showcase-carousel',
  slide: '.js-showcase-slide',
  key: 'showcasesCarousel',
  slickOptions: {
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: true,
    rows: 0,
    mobileFirst: true,
    responsive: [
      {
        breakpoint: 1279,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: true,
          dots: false,
          infinite: true,
          useTransform: false,
        }
      }
    ]
  }
};

const showcaseSlider =  new Slider(sliderOptions);

showcaseSlider.init();