artemsemkin

Untitled

Sep 2nd, 2020 (edited)
156
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class SliderTestimonials extends Slider {
  2.  
  3.   constructor({
  4.     scope,
  5.     target
  6.   }) {
  7.     super({
  8.       target,
  9.       scope
  10.     });
  11.   }
  12.  
  13.   set() {
  14.  
  15.     // counter
  16.     this.$counterCurrent = this.$target.find('.js-slider-testimonials__counter-current');
  17.     this.$counterTotal = this.$target.find('.js-slider-testimonials__counter-total');
  18.     this.counterStyle = this.$target.data('counter-style') || 'roman';
  19.     this.counterZeros = this.$target.data('counter-add-zeros') || 0;
  20.     this.$text = this.$target.find('.slider-testimonials__text');
  21.  
  22.     // params
  23.     this.dragCursor = this.$target.data('drag-cursor') || false;
  24.     this.dragClass = this.$target.data('drag-class') || '';
  25.  
  26.     // dots
  27.     this.$sliderDots = this.$target.find('.js-slider__dots');
  28.   }
  29.  
  30.   run() {
  31.     this.breakpoints = this._setBreakPoints();
  32.     this.slider = this._getSlider();
  33.  
  34.     // counter
  35.     if (this.$counterCurrent.length) {
  36.       this.sliderCounter = this._getSliderCounter({
  37.         slider: this.slider,
  38.         counter: {
  39.           current: this.$counterCurrent,
  40.           total: this.$counterTotal,
  41.           style: this.counterStyle,
  42.           zeros: this.counterZeros
  43.         }
  44.       });
  45.     }
  46.  
  47.     // dots
  48.     if (this.$sliderDots.length) {
  49.       this._getSliderDots({
  50.         slider: this.slider,
  51.         container: this.$sliderDots
  52.       });
  53.     }
  54.  
  55.     // slider drag
  56.     if (this.dragCursor) {
  57.       this._emitDragEvents({
  58.         slider: this.slider,
  59.         target: document,
  60.         customClass: this.dragClass
  61.       });
  62.     }
  63.  
  64.     // pause autoplay
  65.     if (this.slider.params.autoplay.enabled) {
  66.       this._pauseAutoplay({
  67.         slider: this.slider,
  68.       });
  69.     }
  70.  
  71.     // text transitions
  72.     this._setSliderTextTransitions();
  73.  
  74.     this._bindEvents();
  75.   }
  76.  
  77.   _bindEvents() {
  78.     // update height after images are loaded
  79.     this.slider.on('lazyImageReady', () => {
  80.       this.slider.update();
  81.     });
  82.  
  83.     // update slider geometry as images load
  84.     this.$target.imagesLoaded().progress({
  85.       background: true
  86.     }, (e) => {
  87.       setTimeout(() => {
  88.         this.slider.update();
  89.       }, 300);
  90.     });
  91.  
  92.   }
  93.  
  94.   _setBreakPoints() {
  95.     const
  96.       breakpoints = {},
  97.       lg = window.elementorFrontend ? window.elementorFrontend.config.breakpoints.lg - 1 : 1024,
  98.       md = window.elementorFrontend ? window.elementorFrontend.config.breakpoints.md - 1 : 767;
  99.  
  100.     breakpoints[lg] = {
  101.       slidesPerView: this.$target.data('slides-per-view') || 1,
  102.       spaceBetween: this.$target.data('space-between') || 0,
  103.       centeredSlides: this.$target.data('centered-slides') || false,
  104.     };
  105.     breakpoints[md] = {
  106.       slidesPerView: this.$target.data('slides-per-view-tablet') || 1.33,
  107.       spaceBetween: this.$target.data('space-between-tablet') || 20,
  108.       centeredSlides: this.$target.data('centered-slides-tablet') || true,
  109.     };
  110.     breakpoints[320] = {
  111.       slidesPerView: this.$target.data('slides-per-view-mobile') || 1.16,
  112.       spaceBetween: this.$target.data('space-between-mobile') || 10,
  113.       centeredSlides: this.$target.data('centered-slides-mobile') || true,
  114.     };
  115.  
  116.     return breakpoints;
  117.   }
  118.  
  119.   _getSlider() {
  120.     return new Swiper(this.$target, {
  121.       effect: 'fade',
  122.       fadeEffect: {
  123.         crossFade: true
  124.       },
  125.       virtualTranslate: true,
  126.       // allowTouchMove: false,
  127.       simulateTouch: false,
  128.       direction: 'horizontal',
  129.       autoHeight: true,
  130.       speed: this.$target.data('speed') || 1200,
  131.       autoplay: {
  132.         disableOnInteraction: false,
  133.         enabled: this.$target.data('autoplay-enabled') || false,
  134.         delay: this.$target.data('autoplay-delay') || 6000,
  135.       },
  136.       pagination: {
  137.         el: this.$el.find('.js-slider__dots').get(0),
  138.         type: 'bullets',
  139.         bulletElement: 'div',
  140.         clickable: true,
  141.         bulletClass: 'slider__dot',
  142.         bulletActiveClass: 'slider__dot_active'
  143.       },
  144.       navigation: {
  145.         nextEl: this.$el.find('.js-slider__arrow-next').get(0),
  146.         prevEl: this.$el.find('.js-slider__arrow-prev').get(0),
  147.       },
  148.       preloadImages: false,
  149.       lazy: {
  150.         loadPrevNext: true,
  151.         loadPrevNextAmount: 3,
  152.         loadOnTransitionStart: true
  153.       },
  154.     });
  155.   }
  156.  
  157.   _setSliderTextTransitions() {
  158.     return new SliderTextTransitions({
  159.       slider: this.slider,
  160.       offset: 50,
  161.       description: this.$text
  162.     });
  163.   }
  164.  
  165. }
  166.  
RAW Paste Data