Cacher is the code snippet organizer for pro developers

.slider__slide__item {
  position: relative;
  height: inherit;
  overflow: hidden;

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%) scale(1, 1);
    will-change: opacity;
    transition: transform 16s 0s linear;
  }
  
  &.slick-current, &.slick-before {
    img {
      transform: translateX(-50%) translateY(-50%) scale(1.2, 1.2);
    }
  }
}

/**
 * スライダー
 */
export default class extends ViewBase {

  constructor(el) {
    super(el);

  }

  initialize() {
    super.initialize();
  }

  bind() {
    // console.log(this);
    // console.log(Object.keys(this));
    this.$body.on('onInitBody', this.onLoadWindow.bind(this));
    this.$el.on('init', this.onSlideInit.bind(this));
  }

  onLoadWindow() {

    if($('.slick-initialized')[0]) {
      return;
    }

    this.$el.slick({
      autoplay: true,
      pauseOnHover: false,
      pauseOnDotsHover: false,
      autoplaySpeed: 6000,
      infinite: true,
      fade: true,
      speed: 6500,
      cssEase: 'linear'
    }).on('beforeChange', this.onBeforeChange.bind(this));
  }

  onBeforeChange(event, slick, currentSlide, nextSlide) {
    $('.slick-slide').removeClass('slick-before');
    $('.slick-active').addClass('slick-before');
  }
  
  onSlideInit() {

    this.$body.addClass('is-slick-initialized');
  }
}