https://magistral-kms.ru/assets/js/components/hs.carousel.js

1/**
2 * Carousel wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires
7 *
8 */
9;(function ($) {
10  'use strict';
11
12  $.HSCore.components.HSCarousel = {
13    /**
14     *
15     *
16     * @var Object _baseConfig
17     */
18    _baseConfig: {
19      autoplay: true,
20      infinite: true
21    },
22
23    /**
24     *
25     *
26     * @var jQuery pageCollection
27     */
28    pageCollection: $(),
29
30    /**
31     * Initialization of Carousel wrapper.
32     *
33     * @param String selector (optional)
34     * @param Object config (optional)
35     *
36     * @return jQuery pageCollection - collection of initialized items.
37     */
38
39    init: function (selector, config) {
40
41      this.collection = selector && $(selector).length ? $(selector) : $();
42      if (!$(selector).length) return;
43
44      this.config = config && $.isPlainObject(config) ?
45        $.extend({}, this._baseConfig, config) : this._baseConfig;
46
47      this.config.itemSelector = selector;
48
49      this.initCarousel();
50
51      return this.pageCollection;
52
53    },
54
55    initCarousel: function () {
56      //Variables
57      var $self = this,
58        config = $self.config,
59        collection = $self.pageCollection;
60
61      //Actions
62      this.collection.each(function (i, el) {
63        //Variables
64        var $this = $(el),
65          id = $this.attr('id'),
66
67          //Markup elements
68          target = $this.data('nav-for'),
69          isThumb = $this.data('is-thumbs'),
70          arrowsClasses = $this.data('arrows-classes'),
71          arrowLeftClasses = $this.data('arrow-left-classes'),
72          arrowRightClasses = $this.data('arrow-right-classes'),
73          pagiClasses = $this.data('pagi-classes'),
74          pagiHelper = $this.data('pagi-helper'),
75          $pagiIcons = $this.data('pagi-icons'),
76          $prevMarkup = '<div class="js-prev ' + arrowsClasses + ' ' + arrowLeftClasses + '"></div>',
77          $nextMarkup = '<div class="js-next ' + arrowsClasses + ' ' + arrowRightClasses + '"></div>',
78
79          //Setters
80          setSlidesToShow = $this.data('slides-show'),
81          setSlidesToScroll = $this.data('slides-scroll'),
82          setAutoplay = $this.data('autoplay'),
83          setAnimation = $this.data('animation'),
84          setEasing = $this.data('easing'),
85          setFade = $this.data('fade'),
86          setSpeed = $this.data('speed'),
87          setSlidesRows = $this.data('rows'),
88          setCenterMode = $this.data('center-mode'),
89          setCenterPadding = $this.data('center-padding'),
90          setPauseOnHover = $this.data('pause-hover'),
91          setVariableWidth = $this.data('variable-width'),
92          setInitialSlide = $this.data('initial-slide'),
93          setVertical = $this.data('vertical'),
94          setRtl = $this.data('rtl'),
95          setInEffect = $this.data('in-effect'),
96          setOutEffect = $this.data('out-effect'),
97          setInfinite = $this.data('infinite'),
98          setDataTitlePosition = $this.data('title-pos-inside'),
99          setFocusOnSelect = $this.data('focus-on-select'),
100          setLazyLoad = $this.data('lazy-load');
101
102        $this.on('init', function (event, slick) {
103          $(slick.$slides).css('height', 'auto');
104        });
105
106        if (setInEffect && setOutEffect) {
107          $this.on('init', function (event, slick) {
108            $(slick.$slides).addClass('single-slide');
109          });
110        }
111
112        if (pagiHelper) {
113          $this.on('init', function (event, slick) {
114            var $pagination = $this.find('.js-pagination');
115
116            if (!$pagination.length) return;
117
118            $pagination.append('<span class="u-dots-helper"></span>');
119          });
120        }
121
122        if (isThumb) {
123          $('#' + id).on('click', '.js-slide', function (e) {
124            e.stopPropagation();
125            //Variables
126            var i;
127
128            //Variables values
129            i = $(this).data('slick-index');
130
131            if ($('#' + id).slick('slickCurrentSlide') !== i) {
132              $('#' + id).slick('slickGoTo', i);
133            }
134          });
135        }
136
137        $this.on('init', function (event, slider) {
138          var $pagination = $this.find('.js-pagination');
139
140          if (!$pagination.length) return;
141
142          $($pagination[0].children[0]).addClass('slick-current');
143        });
144
145        $this.slick({
146          autoplay: setAutoplay ? true : false,
147          autoplaySpeed: setSpeed ? setSpeed : 3000,
148
149          cssEase: setAnimation ? setAnimation : 'ease',
150          easing: setEasing ? setEasing : 'linear',
151          fade: setFade ? true : false,
152
153          infinite: setInfinite ? true : false,
154          initialSlide: setInitialSlide ? setInitialSlide - 1 : 0,
155          slidesToShow: setSlidesToShow ? setSlidesToShow : 1,
156          slidesToScroll: setSlidesToScroll ? setSlidesToScroll : 1,
157          centerMode: setCenterMode ? true : false,

158          variableWidth: setVariableWidth ? true : false,
159          pauseOnHover: setPauseOnHover ? true : false,
160          rows: setSlidesRows ? setSlidesRows : 1,
161          vertical: setVertical ? true : false,
162          verticalSwiping: setVertical ? true : false,
163          rtl: setRtl ? true : false,
164          centerPadding: setCenterPadding ? setCenterPadding : 0,
165          focusOnSelect: setFocusOnSelect ? true : false,
166          lazyLoad: setLazyLoad ? setLazyLoad : false,
167
168          asNavFor: target ? target : false,
169          prevArrow: arrowsClasses ? $prevMarkup : false,
170          nextArrow: arrowsClasses ? $nextMarkup : false,
171          dots: pagiClasses ? true : false,
172          dotsClass: 'js-pagination ' + pagiClasses,
173          customPaging: function (slider, i) {
174            var title = $(slider.$slides[i]).data('title');
175
176            if (title && $pagiIcons) {
177              return '<span>' + title + '</span>' + $pagiIcons;
178            } else if ($pagiIcons) {
179              return '<span></span>' + $pagiIcons;
180            } else if (title && setDataTitlePosition) {
181              return '<span>' + title + '</span>';
182            } else if (title && !setDataTitlePosition) {
183              return '<span></span>' + '<strong class="u-dot-title">' + title + '</strong>';
184            } else {
185              return '<span></span>';
186            }
187          }
188        });
189
190        $this.on('beforeChange', function (event, slider, currentSlide, nextSlide) {
191          var $pagination = $this.find('.js-pagination');
192
193          if (!$pagination.length) return;
194
195          if (currentSlide > nextSlide) {
196            $($pagination[0].children).removeClass('slick-active-right');
197            $($pagination[0].children[nextSlide]).addClass('slick-active-right');
198          } else {
199            $($pagination[0].children).removeClass('slick-active-right');
200          }
201
202          $($pagination[0].children).removeClass('slick-current');
203          setTimeout(function () {
204            $($pagination[0].children[nextSlide]).addClass('slick-current');
205          }, .25);
206        });
207
208        if (setInEffect && setOutEffect) {
209          $this.on('afterChange', function (event, slick, currentSlide, nextSlide) {
210            $(slick.$slides).removeClass('animated set-position ' + setInEffect + ' ' + setOutEffect);
211          });
212
213          $this.on('beforeChange', function (event, slick, currentSlide) {
214            $(slick.$slides[currentSlide]).addClass('animated ' + setOutEffect);
215          });
216
217          $this.on('setPosition', function (event, slick) {
218            $(slick.$slides[slick.currentSlide]).addClass('animated set-position ' + setInEffect);
219          });
220        }
221
222        //Actions
223        collection = collection.add($this);
224      });
225    },
226
227    /**
228     * Implementation of text animation.
229     *
230     * @param jQuery carousel
231     * @param String textAnimationSelector
232     *
233     * @requires charming.js, anime.js, textfx.js
234     *
235     * @return undefined
236     */
237    initTextAnimation: function(carousel, textAnimationSelector) {
238
239      if (!window.TextFx || !window.anime || !carousel.length) return;
240
241      var $text = carousel.find(textAnimationSelector);
242
243      if (!$text.length) return;
244
245      $text.each(function (i, el) {
246
247        var $this = $(el);
248
249        if (!$this.data('TextFx')) {
250
251          $this.data('TextFx', new TextFx($this.get(0)));
252
253        }
254
255      });
256
257
258      carousel.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
259
260        var targets = slick.$slider
261          .find('.slick-track')
262          .children();
263
264        var currentTarget = targets.eq(currentSlide),
265          nextTarget = targets.eq(nextSlide);
266
267        currentTarget = currentTarget.find(textAnimationSelector);
268        nextTarget = nextTarget.find(textAnimationSelector);
269
270        if (currentTarget.length) {
271          currentTarget.data('TextFx').hide(currentTarget.data('effect') ? currentTarget.data('effect') : 'fx1');
272        }
273
274        if (nextTarget.length) {
275          nextTarget.data('TextFx').show(nextTarget.data('effect') ? nextTarget.data('effect') : 'fx1');
276        }
277
278      });
279
280    }
281  }
282
283})(jQuery);