]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-slick-component.git/blob - slick/slick.js
3 ___| (_) ___| | __ (_)___
4 / __| | |/ __| |/ / | / __|
5 \__ \ | | (__| < _ | \__ \
6 |___/_|_|\___|_|\_(_)/ |___/
11 Website: http://kenwheeler.github.io
12 Docs: http://kenwheeler.github.io/slick
13 Repo: http://github.com/kenwheeler/slick
14 Issues: http://github.com/kenwheeler/slick/issues
17 /* global window, document, define, jQuery, setInterval, clearInterval */
20 if (typeof define
=== 'function' && define
.amd
) {
21 define(['jquery'], factory
);
22 } else if (typeof exports
!== 'undefined') {
23 module
.exports
= factory(require('jquery'));
30 var Slick
= window
.Slick
|| {};
36 function Slick(element
, settings
) {
38 var _
= this, dataSettings
;
42 adaptiveHeight: false,
43 appendArrows: $(element
),
44 appendDots: $(element
),
47 prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
48 nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
52 centerPadding: '50px',
54 customPaging: function(slider
, i
) {
55 return $('<button type="button" data-role="none" role="button" tabindex="0" />').text(i
+ 1);
58 dotsClass: 'slick-dots',
70 pauseOnDotsHover: false,
88 verticalSwiping: false,
116 transformsEnabled: false,
120 $.extend(_
, _
.initials
);
122 _
.activeBreakpoint
= null;
126 _
.breakpointSettings
= [];
127 _
.cssTransitions
= false;
129 _
.interrupted
= false;
132 _
.positionProp
= null;
135 _
.shouldClick
= true;
136 _
.$slider
= $(element
);
137 _
.$slidesCache
= null;
138 _
.transformType
= null;
139 _
.transitionType
= null;
140 _
.visibilityChange
= 'visibilitychange';
142 _
.windowTimer
= null;
144 dataSettings
= $(element
).data('slick') || {};
146 _
.options
= $.extend({}, _
.defaults
, settings
, dataSettings
);
148 _
.currentSlide
= _
.options
.initialSlide
;
150 _
.originalSettings
= _
.options
;
152 if (typeof document
.mozHidden
!== 'undefined') {
153 _
.hidden
= 'mozHidden';
154 _
.visibilityChange
= 'mozvisibilitychange';
155 } else if (typeof document
.webkitHidden
!== 'undefined') {
156 _
.hidden
= 'webkitHidden';
157 _
.visibilityChange
= 'webkitvisibilitychange';
160 _
.autoPlay
= $.proxy(_
.autoPlay
, _
);
161 _
.autoPlayClear
= $.proxy(_
.autoPlayClear
, _
);
162 _
.autoPlayIterator
= $.proxy(_
.autoPlayIterator
, _
);
163 _
.changeSlide
= $.proxy(_
.changeSlide
, _
);
164 _
.clickHandler
= $.proxy(_
.clickHandler
, _
);
165 _
.selectHandler
= $.proxy(_
.selectHandler
, _
);
166 _
.setPosition
= $.proxy(_
.setPosition
, _
);
167 _
.swipeHandler
= $.proxy(_
.swipeHandler
, _
);
168 _
.dragHandler
= $.proxy(_
.dragHandler
, _
);
169 _
.keyHandler
= $.proxy(_
.keyHandler
, _
);
171 _
.instanceUid
= instanceUid
++;
173 // A simple way to check for HTML strings
174 // Strict HTML recognition (must start with <)
175 // Extracted from jQuery v1.11 source
176 _
.htmlExpr
= /^(?:\s*(<[\w\W]+>)[^>]*)$/;
179 _
.registerBreakpoints();
188 Slick
.prototype.activateADA = function() {
191 _
.$slideTrack
.find('.slick-active').attr({
192 'aria-hidden': 'false'
193 }).find('a, input, button, select').attr({
199 Slick
.prototype.addSlide
= Slick
.prototype.slickAdd = function(markup
, index
, addBefore
) {
203 if (typeof(index
) === 'boolean') {
206 } else if (index
< 0 || (index
>= _
.slideCount
)) {
212 if (typeof(index
) === 'number') {
213 if (index
=== 0 && _
.$slides
.length
=== 0) {
214 $(markup
).appendTo(_
.$slideTrack
);
215 } else if (addBefore
) {
216 $(markup
).insertBefore(_
.$slides
.eq(index
));
218 $(markup
).insertAfter(_
.$slides
.eq(index
));
221 if (addBefore
=== true) {
222 $(markup
).prependTo(_
.$slideTrack
);
224 $(markup
).appendTo(_
.$slideTrack
);
228 _
.$slides
= _
.$slideTrack
.children(this.options
.slide
);
230 _
.$slideTrack
.children(this.options
.slide
).detach();
232 _
.$slideTrack
.append(_
.$slides
);
234 _
.$slides
.each(function(index
, element
) {
235 $(element
).attr('data-slick-index', index
);
238 _
.$slidesCache
= _
.$slides
;
244 Slick
.prototype.animateHeight = function() {
246 if (_
.options
.slidesToShow
=== 1 && _
.options
.adaptiveHeight
=== true && _
.options
.vertical
=== false) {
247 var targetHeight
= _
.$slides
.eq(_
.currentSlide
).outerHeight(true);
254 Slick
.prototype.animateSlide = function(targetLeft
, callback
) {
261 if (_
.options
.rtl
=== true && _
.options
.vertical
=== false) {
262 targetLeft
= -targetLeft
;
264 if (_
.transformsEnabled
=== false) {
265 if (_
.options
.vertical
=== false) {
266 _
.$slideTrack
.animate({
268 }, _
.options
.speed
, _
.options
.easing
, callback
);
270 _
.$slideTrack
.animate({
272 }, _
.options
.speed
, _
.options
.easing
, callback
);
277 if (_
.cssTransitions
=== false) {
278 if (_
.options
.rtl
=== true) {
279 _
.currentLeft
= -(_
.currentLeft
);
282 animStart: _
.currentLeft
284 animStart: targetLeft
286 duration: _
.options
.speed
,
287 easing: _
.options
.easing
,
288 step: function(now
) {
289 now
= Math
.ceil(now
);
290 if (_
.options
.vertical
=== false) {
291 animProps
[_
.animType
] = 'translate(' +
293 _
.$slideTrack
.css(animProps
);
295 animProps
[_
.animType
] = 'translate(0px,' +
297 _
.$slideTrack
.css(animProps
);
300 complete: function() {
310 targetLeft
= Math
.ceil(targetLeft
);
312 if (_
.options
.vertical
=== false) {
313 animProps
[_
.animType
] = 'translate3d(' + targetLeft
+ 'px, 0px, 0px)';
315 animProps
[_
.animType
] = 'translate3d(0px,' + targetLeft
+ 'px, 0px)';
317 _
.$slideTrack
.css(animProps
);
320 setTimeout(function() {
322 _
.disableTransition();
334 Slick
.prototype.getNavTarget = function() {
337 asNavFor
= _
.options
.asNavFor
;
339 if ( asNavFor
&& asNavFor
!== null ) {
340 asNavFor
= $(asNavFor
).not(_
.$slider
);
347 Slick
.prototype.asNavFor = function(index
) {
350 asNavFor
= _
.getNavTarget();
352 if ( asNavFor
!== null && typeof asNavFor
=== 'object' ) {
353 asNavFor
.each(function() {
354 var target
= $(this).slick('getSlick');
355 if(!target
.unslicked
) {
356 target
.slideHandler(index
, true);
363 Slick
.prototype.applyTransition = function(slide
) {
368 if (_
.options
.fade
=== false) {
369 transition
[_
.transitionType
] = _
.transformType
+ ' ' + _
.options
.speed
+ 'ms ' + _
.options
.cssEase
;
371 transition
[_
.transitionType
] = 'opacity ' + _
.options
.speed
+ 'ms ' + _
.options
.cssEase
;
374 if (_
.options
.fade
=== false) {
375 _
.$slideTrack
.css(transition
);
377 _
.$slides
.eq(slide
).css(transition
);
382 Slick
.prototype.autoPlay = function() {
388 if ( _
.slideCount
> _
.options
.slidesToShow
) {
389 _
.autoPlayTimer
= setInterval( _
.autoPlayIterator
, _
.options
.autoplaySpeed
);
394 Slick
.prototype.autoPlayClear = function() {
398 if (_
.autoPlayTimer
) {
399 clearInterval(_
.autoPlayTimer
);
404 Slick
.prototype.autoPlayIterator = function() {
407 slideTo
= _
.currentSlide
+ _
.options
.slidesToScroll
;
409 if ( !_
.paused
&& !_
.interrupted
&& !_
.focussed
) {
411 if ( _
.options
.infinite
=== false ) {
413 if ( _
.direction
=== 1 && ( _
.currentSlide
+ 1 ) === ( _
.slideCount
- 1 )) {
417 else if ( _
.direction
=== 0 ) {
419 slideTo
= _
.currentSlide
- _
.options
.slidesToScroll
;
421 if ( _
.currentSlide
- 1 === 0 ) {
429 _
.slideHandler( slideTo
);
435 Slick
.prototype.buildArrows = function() {
439 if (_
.options
.arrows
=== true ) {
441 _
.$prevArrow
= $(_
.options
.prevArrow
).addClass('slick-arrow');
442 _
.$nextArrow
= $(_
.options
.nextArrow
).addClass('slick-arrow');
444 if( _
.slideCount
> _
.options
.slidesToShow
) {
446 _
.$prevArrow
.removeClass('slick-hidden').removeAttr('aria-hidden tabindex');
447 _
.$nextArrow
.removeClass('slick-hidden').removeAttr('aria-hidden tabindex');
449 if (_
.htmlExpr
.test(_
.options
.prevArrow
)) {
450 _
.$prevArrow
.prependTo(_
.options
.appendArrows
);
453 if (_
.htmlExpr
.test(_
.options
.nextArrow
)) {
454 _
.$nextArrow
.appendTo(_
.options
.appendArrows
);
457 if (_
.options
.infinite
!== true) {
459 .addClass('slick-disabled')
460 .attr('aria-disabled', 'true');
465 _
.$prevArrow
.add( _
.$nextArrow
)
467 .addClass('slick-hidden')
469 'aria-disabled': 'true',
479 Slick
.prototype.buildDots = function() {
484 if (_
.options
.dots
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
486 _
.$slider
.addClass('slick-dotted');
488 dot
= $('<ul />').addClass(_
.options
.dotsClass
);
490 for (i
= 0; i
<= _
.getDotCount(); i
+= 1) {
491 dot
.append($('<li />').append(_
.options
.customPaging
.call(this, _
, i
)));
494 _
.$dots
= dot
.appendTo(_
.options
.appendDots
);
496 _
.$dots
.find('li').first().addClass('slick-active').attr('aria-hidden', 'false');
502 Slick
.prototype.buildOut = function() {
508 .children( _
.options
.slide
+ ':not(.slick-cloned)')
509 .addClass('slick-slide');
511 _
.slideCount
= _
.$slides
.length
;
513 _
.$slides
.each(function(index
, element
) {
515 .attr('data-slick-index', index
)
516 .data('originalStyling', $(element
).attr('style') || '');
519 _
.$slider
.addClass('slick-slider');
521 _
.$slideTrack
= (_
.slideCount
=== 0) ?
522 $('<div class="slick-track"/>').appendTo(_
.$slider
) :
523 _
.$slides
.wrapAll('<div class="slick-track"/>').parent();
525 _
.$list
= _
.$slideTrack
.wrap(
526 '<div aria-live="polite" class="slick-list"/>').parent();
527 _
.$slideTrack
.css('opacity', 0);
529 if (_
.options
.centerMode
=== true || _
.options
.swipeToSlide
=== true) {
530 _
.options
.slidesToScroll
= 1;
533 $('img[data-lazy]', _
.$slider
).not('[src]').addClass('slick-loading');
544 _
.setSlideClasses(typeof _
.currentSlide
=== 'number' ? _
.currentSlide : 0);
546 if (_
.options
.draggable
=== true) {
547 _
.$list
.addClass('draggable');
552 Slick
.prototype.buildRows = function() {
554 var _
= this, a
, b
, c
, newSlides
, numOfSlides
, originalSlides
,slidesPerSection
;
556 newSlides
= document
.createDocumentFragment();
557 originalSlides
= _
.$slider
.children();
559 if(_
.options
.rows
> 1) {
561 slidesPerSection
= _
.options
.slidesPerRow
* _
.options
.rows
;
562 numOfSlides
= Math
.ceil(
563 originalSlides
.length
/ slidesPerSection
566 for(a
= 0; a
< numOfSlides
; a
++){
567 var slide
= document
.createElement('div');
568 for(b
= 0; b
< _
.options
.rows
; b
++) {
569 var row
= document
.createElement('div');
570 for(c
= 0; c
< _
.options
.slidesPerRow
; c
++) {
571 var target
= (a
* slidesPerSection
+ ((b
* _
.options
.slidesPerRow
) + c
));
572 if (originalSlides
.get(target
)) {
573 row
.appendChild(originalSlides
.get(target
));
576 slide
.appendChild(row
);
578 newSlides
.appendChild(slide
);
581 _
.$slider
.empty().append(newSlides
);
582 _
.$slider
.children().children().children()
584 'width':(100 / _
.options
.slidesPerRow
) + '%',
585 'display': 'inline-block'
592 Slick
.prototype.checkResponsive = function(initial
, forceUpdate
) {
595 breakpoint
, targetBreakpoint
, respondToWidth
, triggerBreakpoint
= false;
596 var sliderWidth
= _
.$slider
.width();
597 var windowWidth
= window
.innerWidth
|| $(window
).width();
599 if (_
.respondTo
=== 'window') {
600 respondToWidth
= windowWidth
;
601 } else if (_
.respondTo
=== 'slider') {
602 respondToWidth
= sliderWidth
;
603 } else if (_
.respondTo
=== 'min') {
604 respondToWidth
= Math
.min(windowWidth
, sliderWidth
);
607 if ( _
.options
.responsive
&&
608 _
.options
.responsive
.length
&&
609 _
.options
.responsive
!== null) {
611 targetBreakpoint
= null;
613 for (breakpoint
in _
.breakpoints
) {
614 if (_
.breakpoints
.hasOwnProperty(breakpoint
)) {
615 if (_
.originalSettings
.mobileFirst
=== false) {
616 if (respondToWidth
< _
.breakpoints
[breakpoint
]) {
617 targetBreakpoint
= _
.breakpoints
[breakpoint
];
620 if (respondToWidth
> _
.breakpoints
[breakpoint
]) {
621 targetBreakpoint
= _
.breakpoints
[breakpoint
];
627 if (targetBreakpoint
!== null) {
628 if (_
.activeBreakpoint
!== null) {
629 if (targetBreakpoint
!== _
.activeBreakpoint
|| forceUpdate
) {
632 if (_
.breakpointSettings
[targetBreakpoint
] === 'unslick') {
633 _
.unslick(targetBreakpoint
);
635 _
.options
= $.extend({}, _
.originalSettings
,
636 _
.breakpointSettings
[
638 if (initial
=== true) {
639 _
.currentSlide
= _
.options
.initialSlide
;
643 triggerBreakpoint
= targetBreakpoint
;
646 _
.activeBreakpoint
= targetBreakpoint
;
647 if (_
.breakpointSettings
[targetBreakpoint
] === 'unslick') {
648 _
.unslick(targetBreakpoint
);
650 _
.options
= $.extend({}, _
.originalSettings
,
651 _
.breakpointSettings
[
653 if (initial
=== true) {
654 _
.currentSlide
= _
.options
.initialSlide
;
658 triggerBreakpoint
= targetBreakpoint
;
661 if (_
.activeBreakpoint
!== null) {
662 _
.activeBreakpoint
= null;
663 _
.options
= _
.originalSettings
;
664 if (initial
=== true) {
665 _
.currentSlide
= _
.options
.initialSlide
;
668 triggerBreakpoint
= targetBreakpoint
;
672 // only trigger breakpoints during an actual break. not on initialize.
673 if( !initial
&& triggerBreakpoint
!== false ) {
674 _
.$slider
.trigger('breakpoint', [_
, triggerBreakpoint
]);
680 Slick
.prototype.changeSlide = function(event
, dontAnimate
) {
683 $target
= $(event
.currentTarget
),
684 indexOffset
, slideOffset
, unevenOffset
;
686 // If target is a link, prevent default action.
687 if($target
.is('a')) {
688 event
.preventDefault();
691 // If target is not the <li> element (ie: a child), find the <li>.
692 if(!$target
.is('li')) {
693 $target
= $target
.closest('li');
696 unevenOffset
= (_
.slideCount
% _
.options
.slidesToScroll
!== 0);
697 indexOffset
= unevenOffset
? 0 : (_
.slideCount
- _
.currentSlide
) % _
.options
.slidesToScroll
;
699 switch (event
.data
.message
) {
702 slideOffset
= indexOffset
=== 0 ? _
.options
.slidesToScroll : _
.options
.slidesToShow
- indexOffset
;
703 if (_
.slideCount
> _
.options
.slidesToShow
) {
704 _
.slideHandler(_
.currentSlide
- slideOffset
, false, dontAnimate
);
709 slideOffset
= indexOffset
=== 0 ? _
.options
.slidesToScroll : indexOffset
;
710 if (_
.slideCount
> _
.options
.slidesToShow
) {
711 _
.slideHandler(_
.currentSlide
+ slideOffset
, false, dontAnimate
);
716 var index
= event
.data
.index
=== 0 ? 0 :
717 event
.data
.index
|| $target
.index() * _
.options
.slidesToScroll
;
719 _
.slideHandler(_
.checkNavigable(index
), false, dontAnimate
);
720 $target
.children().trigger('focus');
729 Slick
.prototype.checkNavigable = function(index
) {
732 navigables
, prevNavigable
;
734 navigables
= _
.getNavigableIndexes();
736 if (index
> navigables
[navigables
.length
- 1]) {
737 index
= navigables
[navigables
.length
- 1];
739 for (var n
in navigables
) {
740 if (index
< navigables
[n
]) {
741 index
= prevNavigable
;
744 prevNavigable
= navigables
[n
];
751 Slick
.prototype.cleanUpEvents = function() {
755 if (_
.options
.dots
&& _
.$dots
!== null) {
758 .off('click.slick', _
.changeSlide
)
759 .off('mouseenter.slick', $.proxy(_
.interrupt
, _
, true))
760 .off('mouseleave.slick', $.proxy(_
.interrupt
, _
, false));
764 _
.$slider
.off('focus.slick blur.slick');
766 if (_
.options
.arrows
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
767 _
.$prevArrow
&& _
.$prevArrow
.off('click.slick', _
.changeSlide
);
768 _
.$nextArrow
&& _
.$nextArrow
.off('click.slick', _
.changeSlide
);
771 _
.$list
.off('touchstart.slick mousedown.slick', _
.swipeHandler
);
772 _
.$list
.off('touchmove.slick mousemove.slick', _
.swipeHandler
);
773 _
.$list
.off('touchend.slick mouseup.slick', _
.swipeHandler
);
774 _
.$list
.off('touchcancel.slick mouseleave.slick', _
.swipeHandler
);
776 _
.$list
.off('click.slick', _
.clickHandler
);
778 $(document
).off(_
.visibilityChange
, _
.visibility
);
780 _
.cleanUpSlideEvents();
782 if (_
.options
.accessibility
=== true) {
783 _
.$list
.off('keydown.slick', _
.keyHandler
);
786 if (_
.options
.focusOnSelect
=== true) {
787 $(_
.$slideTrack
).children().off('click.slick', _
.selectHandler
);
790 $(window
).off('orientationchange.slick.slick-' + _
.instanceUid
, _
.orientationChange
);
792 $(window
).off('resize.slick.slick-' + _
.instanceUid
, _
.resize
);
794 $('[draggable!=true]', _
.$slideTrack
).off('dragstart', _
.preventDefault
);
796 $(window
).off('load.slick.slick-' + _
.instanceUid
, _
.setPosition
);
797 $(document
).off('ready.slick.slick-' + _
.instanceUid
, _
.setPosition
);
801 Slick
.prototype.cleanUpSlideEvents = function() {
805 _
.$list
.off('mouseenter.slick', $.proxy(_
.interrupt
, _
, true));
806 _
.$list
.off('mouseleave.slick', $.proxy(_
.interrupt
, _
, false));
810 Slick
.prototype.cleanUpRows = function() {
812 var _
= this, originalSlides
;
814 if(_
.options
.rows
> 1) {
815 originalSlides
= _
.$slides
.children().children();
816 originalSlides
.removeAttr('style');
817 _
.$slider
.empty().append(originalSlides
);
822 Slick
.prototype.clickHandler = function(event
) {
826 if (_
.shouldClick
=== false) {
827 event
.stopImmediatePropagation();
828 event
.stopPropagation();
829 event
.preventDefault();
834 Slick
.prototype.destroy = function(refresh
) {
844 $('.slick-cloned', _
.$slider
).detach();
851 if ( _
.$prevArrow
&& _
.$prevArrow
.length
) {
854 .removeClass('slick-disabled slick-arrow slick-hidden')
855 .removeAttr('aria-hidden aria-disabled tabindex')
858 if ( _
.htmlExpr
.test( _
.options
.prevArrow
)) {
859 _
.$prevArrow
.remove();
863 if ( _
.$nextArrow
&& _
.$nextArrow
.length
) {
866 .removeClass('slick-disabled slick-arrow slick-hidden')
867 .removeAttr('aria-hidden aria-disabled tabindex')
870 if ( _
.htmlExpr
.test( _
.options
.nextArrow
)) {
871 _
.$nextArrow
.remove();
880 .removeClass('slick-slide slick-active slick-center slick-visible slick-current')
881 .removeAttr('aria-hidden')
882 .removeAttr('data-slick-index')
884 $(this).attr('style', $(this).data('originalStyling'));
887 _
.$slideTrack
.children(this.options
.slide
).detach();
889 _
.$slideTrack
.detach();
893 _
.$slider
.append(_
.$slides
);
898 _
.$slider
.removeClass('slick-slider');
899 _
.$slider
.removeClass('slick-initialized');
900 _
.$slider
.removeClass('slick-dotted');
905 _
.$slider
.trigger('destroy', [_
]);
910 Slick
.prototype.disableTransition = function(slide
) {
915 transition
[_
.transitionType
] = '';
917 if (_
.options
.fade
=== false) {
918 _
.$slideTrack
.css(transition
);
920 _
.$slides
.eq(slide
).css(transition
);
925 Slick
.prototype.fadeSlide = function(slideIndex
, callback
) {
929 if (_
.cssTransitions
=== false) {
931 _
.$slides
.eq(slideIndex
).css({
932 zIndex: _
.options
.zIndex
935 _
.$slides
.eq(slideIndex
).animate({
937 }, _
.options
.speed
, _
.options
.easing
, callback
);
941 _
.applyTransition(slideIndex
);
943 _
.$slides
.eq(slideIndex
).css({
945 zIndex: _
.options
.zIndex
949 setTimeout(function() {
951 _
.disableTransition(slideIndex
);
961 Slick
.prototype.fadeSlideOut = function(slideIndex
) {
965 if (_
.cssTransitions
=== false) {
967 _
.$slides
.eq(slideIndex
).animate({
969 zIndex: _
.options
.zIndex
- 2
970 }, _
.options
.speed
, _
.options
.easing
);
974 _
.applyTransition(slideIndex
);
976 _
.$slides
.eq(slideIndex
).css({
978 zIndex: _
.options
.zIndex
- 2
985 Slick
.prototype.filterSlides
= Slick
.prototype.slickFilter = function(filter
) {
989 if (filter
!== null) {
991 _
.$slidesCache
= _
.$slides
;
995 _
.$slideTrack
.children(this.options
.slide
).detach();
997 _
.$slidesCache
.filter(filter
).appendTo(_
.$slideTrack
);
1005 Slick
.prototype.focusHandler = function() {
1010 .off('focus.slick blur.slick')
1011 .on('focus.slick blur.slick',
1012 '*:not(.slick-arrow)', function(event
) {
1014 event
.stopImmediatePropagation();
1017 setTimeout(function() {
1019 if( _
.options
.pauseOnFocus
) {
1020 _
.focussed
= $sf
.is(':focus');
1029 Slick
.prototype.getCurrent
= Slick
.prototype.slickCurrentSlide = function() {
1032 return _
.currentSlide
;
1036 Slick
.prototype.getDotCount = function() {
1044 if (_
.options
.infinite
=== true) {
1045 while (breakPoint
< _
.slideCount
) {
1047 breakPoint
= counter
+ _
.options
.slidesToScroll
;
1048 counter
+= _
.options
.slidesToScroll
<= _
.options
.slidesToShow
? _
.options
.slidesToScroll : _
.options
.slidesToShow
;
1050 } else if (_
.options
.centerMode
=== true) {
1051 pagerQty
= _
.slideCount
;
1052 } else if(!_
.options
.asNavFor
) {
1053 pagerQty
= 1 + Math
.ceil((_
.slideCount
- _
.options
.slidesToShow
) / _
.options
.slidesToScroll
);
1055 while (breakPoint
< _
.slideCount
) {
1057 breakPoint
= counter
+ _
.options
.slidesToScroll
;
1058 counter
+= _
.options
.slidesToScroll
<= _
.options
.slidesToShow
? _
.options
.slidesToScroll : _
.options
.slidesToShow
;
1062 return pagerQty
- 1;
1066 Slick
.prototype.getLeft = function(slideIndex
) {
1075 verticalHeight
= _
.$slides
.first().outerHeight(true);
1077 if (_
.options
.infinite
=== true) {
1078 if (_
.slideCount
> _
.options
.slidesToShow
) {
1079 _
.slideOffset
= (_
.slideWidth
* _
.options
.slidesToShow
) * -1;
1080 verticalOffset
= (verticalHeight
* _
.options
.slidesToShow
) * -1;
1082 if (_
.slideCount
% _
.options
.slidesToScroll
!== 0) {
1083 if (slideIndex
+ _
.options
.slidesToScroll
> _
.slideCount
&& _
.slideCount
> _
.options
.slidesToShow
) {
1084 if (slideIndex
> _
.slideCount
) {
1085 _
.slideOffset
= ((_
.options
.slidesToShow
- (slideIndex
- _
.slideCount
)) * _
.slideWidth
) * -1;
1086 verticalOffset
= ((_
.options
.slidesToShow
- (slideIndex
- _
.slideCount
)) * verticalHeight
) * -1;
1088 _
.slideOffset
= ((_
.slideCount
% _
.options
.slidesToScroll
) * _
.slideWidth
) * -1;
1089 verticalOffset
= ((_
.slideCount
% _
.options
.slidesToScroll
) * verticalHeight
) * -1;
1094 if (slideIndex
+ _
.options
.slidesToShow
> _
.slideCount
) {
1095 _
.slideOffset
= ((slideIndex
+ _
.options
.slidesToShow
) - _
.slideCount
) * _
.slideWidth
;
1096 verticalOffset
= ((slideIndex
+ _
.options
.slidesToShow
) - _
.slideCount
) * verticalHeight
;
1100 if (_
.slideCount
<= _
.options
.slidesToShow
) {
1105 if (_
.options
.centerMode
=== true && _
.options
.infinite
=== true) {
1106 _
.slideOffset
+= _
.slideWidth
* Math
.floor(_
.options
.slidesToShow
/ 2) - _
.slideWidth
;
1107 } else if (_
.options
.centerMode
=== true) {
1109 _
.slideOffset
+= _
.slideWidth
* Math
.floor(_
.options
.slidesToShow
/ 2);
1112 if (_
.options
.vertical
=== false) {
1113 targetLeft
= ((slideIndex
* _
.slideWidth
) * -1) + _
.slideOffset
;
1115 targetLeft
= ((slideIndex
* verticalHeight
) * -1) + verticalOffset
;
1118 if (_
.options
.variableWidth
=== true) {
1120 if (_
.slideCount
<= _
.options
.slidesToShow
|| _
.options
.infinite
=== false) {
1121 targetSlide
= _
.$slideTrack
.children('.slick-slide').eq(slideIndex
);
1123 targetSlide
= _
.$slideTrack
.children('.slick-slide').eq(slideIndex
+ _
.options
.slidesToShow
);
1126 if (_
.options
.rtl
=== true) {
1127 if (targetSlide
[0]) {
1128 targetLeft
= (_
.$slideTrack
.width() - targetSlide
[0].offsetLeft
- targetSlide
.width()) * -1;
1133 targetLeft
= targetSlide
[0] ? targetSlide
[0].offsetLeft
* -1 : 0;
1136 if (_
.options
.centerMode
=== true) {
1137 if (_
.slideCount
<= _
.options
.slidesToShow
|| _
.options
.infinite
=== false) {
1138 targetSlide
= _
.$slideTrack
.children('.slick-slide').eq(slideIndex
);
1140 targetSlide
= _
.$slideTrack
.children('.slick-slide').eq(slideIndex
+ _
.options
.slidesToShow
+ 1);
1143 if (_
.options
.rtl
=== true) {
1144 if (targetSlide
[0]) {
1145 targetLeft
= (_
.$slideTrack
.width() - targetSlide
[0].offsetLeft
- targetSlide
.width()) * -1;
1150 targetLeft
= targetSlide
[0] ? targetSlide
[0].offsetLeft
* -1 : 0;
1153 targetLeft
+= (_
.$list
.width() - targetSlide
.outerWidth()) / 2;
1161 Slick
.prototype.getOption
= Slick
.prototype.slickGetOption = function(option
) {
1165 return _
.options
[option
];
1169 Slick
.prototype.getNavigableIndexes = function() {
1177 if (_
.options
.infinite
=== false) {
1180 breakPoint
= _
.options
.slidesToScroll
* -1;
1181 counter
= _
.options
.slidesToScroll
* -1;
1182 max
= _
.slideCount
* 2;
1185 while (breakPoint
< max
) {
1186 indexes
.push(breakPoint
);
1187 breakPoint
= counter
+ _
.options
.slidesToScroll
;
1188 counter
+= _
.options
.slidesToScroll
<= _
.options
.slidesToShow
? _
.options
.slidesToScroll : _
.options
.slidesToShow
;
1195 Slick
.prototype.getSlick = function() {
1201 Slick
.prototype.getSlideCount = function() {
1204 slidesTraversed
, swipedSlide
, centerOffset
;
1206 centerOffset
= _
.options
.centerMode
=== true ? _
.slideWidth
* Math
.floor(_
.options
.slidesToShow
/ 2) : 0;
1208 if (_
.options
.swipeToSlide
=== true) {
1209 _
.$slideTrack
.find('.slick-slide').each(function(index
, slide
) {
1210 if (slide
.offsetLeft
- centerOffset
+ ($(slide
).outerWidth() / 2) > (_
.swipeLeft
* -1)) {
1211 swipedSlide
= slide
;
1216 slidesTraversed
= Math
.abs($(swipedSlide
).attr('data-slick-index') - _
.currentSlide
) || 1;
1218 return slidesTraversed
;
1221 return _
.options
.slidesToScroll
;
1226 Slick
.prototype.goTo
= Slick
.prototype.slickGoTo = function(slide
, dontAnimate
) {
1233 index: parseInt(slide
)
1239 Slick
.prototype.init = function(creation
) {
1243 if (!$(_
.$slider
).hasClass('slick-initialized')) {
1245 $(_
.$slider
).addClass('slick-initialized');
1252 _
.initializeEvents();
1255 _
.checkResponsive(true);
1261 _
.$slider
.trigger('init', [_
]);
1264 if (_
.options
.accessibility
=== true) {
1268 if ( _
.options
.autoplay
) {
1277 Slick
.prototype.initADA = function() {
1279 _
.$slides
.add(_
.$slideTrack
.find('.slick-cloned')).attr({
1280 'aria-hidden': 'true',
1282 }).find('a, input, button, select').attr({
1286 _
.$slideTrack
.attr('role', 'listbox');
1288 _
.$slides
.not(_
.$slideTrack
.find('.slick-cloned')).each(function(i
) {
1291 'aria-describedby': 'slick-slide' + _
.instanceUid
+ i
+ ''
1295 if (_
.$dots
!== null) {
1296 _
.$dots
.attr('role', 'tablist').find('li').each(function(i
) {
1298 'role': 'presentation',
1299 'aria-selected': 'false',
1300 'aria-controls': 'navigation' + _
.instanceUid
+ i
+ '',
1301 'id': 'slick-slide' + _
.instanceUid
+ i
+ ''
1304 .first().attr('aria-selected', 'true').end()
1305 .find('button').attr('role', 'button').end()
1306 .closest('div').attr('role', 'toolbar');
1312 Slick
.prototype.initArrowEvents = function() {
1316 if (_
.options
.arrows
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
1319 .on('click.slick', {
1324 .on('click.slick', {
1331 Slick
.prototype.initDotEvents = function() {
1335 if (_
.options
.dots
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
1336 $('li', _
.$dots
).on('click.slick', {
1341 if ( _
.options
.dots
=== true && _
.options
.pauseOnDotsHover
=== true ) {
1344 .on('mouseenter.slick', $.proxy(_
.interrupt
, _
, true))
1345 .on('mouseleave.slick', $.proxy(_
.interrupt
, _
, false));
1351 Slick
.prototype.initSlideEvents = function() {
1355 if ( _
.options
.pauseOnHover
) {
1357 _
.$list
.on('mouseenter.slick', $.proxy(_
.interrupt
, _
, true));
1358 _
.$list
.on('mouseleave.slick', $.proxy(_
.interrupt
, _
, false));
1364 Slick
.prototype.initializeEvents = function() {
1368 _
.initArrowEvents();
1371 _
.initSlideEvents();
1373 _
.$list
.on('touchstart.slick mousedown.slick', {
1376 _
.$list
.on('touchmove.slick mousemove.slick', {
1379 _
.$list
.on('touchend.slick mouseup.slick', {
1382 _
.$list
.on('touchcancel.slick mouseleave.slick', {
1386 _
.$list
.on('click.slick', _
.clickHandler
);
1388 $(document
).on(_
.visibilityChange
, $.proxy(_
.visibility
, _
));
1390 if (_
.options
.accessibility
=== true) {
1391 _
.$list
.on('keydown.slick', _
.keyHandler
);
1394 if (_
.options
.focusOnSelect
=== true) {
1395 $(_
.$slideTrack
).children().on('click.slick', _
.selectHandler
);
1398 $(window
).on('orientationchange.slick.slick-' + _
.instanceUid
, $.proxy(_
.orientationChange
, _
));
1400 $(window
).on('resize.slick.slick-' + _
.instanceUid
, $.proxy(_
.resize
, _
));
1402 $('[draggable!=true]', _
.$slideTrack
).on('dragstart', _
.preventDefault
);
1404 $(window
).on('load.slick.slick-' + _
.instanceUid
, _
.setPosition
);
1405 $(document
).on('ready.slick.slick-' + _
.instanceUid
, _
.setPosition
);
1409 Slick
.prototype.initUI = function() {
1413 if (_
.options
.arrows
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
1415 _
.$prevArrow
.show();
1416 _
.$nextArrow
.show();
1420 if (_
.options
.dots
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
1428 Slick
.prototype.keyHandler = function(event
) {
1431 //Dont slide if the cursor is inside the form fields and arrow keys are pressed
1432 if(!event
.target
.tagName
.match('TEXTAREA|INPUT|SELECT')) {
1433 if (event
.keyCode
=== 37 && _
.options
.accessibility
=== true) {
1436 message: _
.options
.rtl
=== true ? 'next' : 'previous'
1439 } else if (event
.keyCode
=== 39 && _
.options
.accessibility
=== true) {
1442 message: _
.options
.rtl
=== true ? 'previous' : 'next'
1450 Slick
.prototype.lazyLoad = function() {
1453 loadRange
, cloneRange
, rangeStart
, rangeEnd
;
1455 function loadImages(imagesScope
) {
1457 $('img[data-lazy]', imagesScope
).each(function() {
1459 var image
= $(this),
1460 imageSource
= $(this).attr('data-lazy'),
1461 imageToLoad
= document
.createElement('img');
1463 imageToLoad
.onload = function() {
1466 .animate({ opacity: 0 }, 100, function() {
1468 .attr('src', imageSource
)
1469 .animate({ opacity: 1 }, 200, function() {
1471 .removeAttr('data-lazy')
1472 .removeClass('slick-loading');
1474 _
.$slider
.trigger('lazyLoaded', [_
, image
, imageSource
]);
1479 imageToLoad
.onerror = function() {
1482 .removeAttr( 'data-lazy' )
1483 .removeClass( 'slick-loading' )
1484 .addClass( 'slick-lazyload-error' );
1486 _
.$slider
.trigger('lazyLoadError', [ _
, image
, imageSource
]);
1490 imageToLoad
.src
= imageSource
;
1496 if (_
.options
.centerMode
=== true) {
1497 if (_
.options
.infinite
=== true) {
1498 rangeStart
= _
.currentSlide
+ (_
.options
.slidesToShow
/ 2 + 1);
1499 rangeEnd
= rangeStart
+ _
.options
.slidesToShow
+ 2;
1501 rangeStart
= Math
.max(0, _
.currentSlide
- (_
.options
.slidesToShow
/ 2 + 1));
1502 rangeEnd
= 2 + (_
.options
.slidesToShow
/ 2 + 1) + _
.currentSlide
;
1505 rangeStart
= _
.options
.infinite
? _
.options
.slidesToShow
+ _
.currentSlide : _
.currentSlide
;
1506 rangeEnd
= Math
.ceil(rangeStart
+ _
.options
.slidesToShow
);
1507 if (_
.options
.fade
=== true) {
1508 if (rangeStart
> 0) rangeStart
--;
1509 if (rangeEnd
<= _
.slideCount
) rangeEnd
++;
1513 loadRange
= _
.$slider
.find('.slick-slide').slice(rangeStart
, rangeEnd
);
1514 loadImages(loadRange
);
1516 if (_
.slideCount
<= _
.options
.slidesToShow
) {
1517 cloneRange
= _
.$slider
.find('.slick-slide');
1518 loadImages(cloneRange
);
1520 if (_
.currentSlide
>= _
.slideCount
- _
.options
.slidesToShow
) {
1521 cloneRange
= _
.$slider
.find('.slick-cloned').slice(0, _
.options
.slidesToShow
);
1522 loadImages(cloneRange
);
1523 } else if (_
.currentSlide
=== 0) {
1524 cloneRange
= _
.$slider
.find('.slick-cloned').slice(_
.options
.slidesToShow
* -1);
1525 loadImages(cloneRange
);
1530 Slick
.prototype.loadSlider = function() {
1540 _
.$slider
.removeClass('slick-loading');
1544 if (_
.options
.lazyLoad
=== 'progressive') {
1545 _
.progressiveLazyLoad();
1550 Slick
.prototype.next
= Slick
.prototype.slickNext = function() {
1562 Slick
.prototype.orientationChange = function() {
1566 _
.checkResponsive();
1571 Slick
.prototype.pause
= Slick
.prototype.slickPause = function() {
1580 Slick
.prototype.play
= Slick
.prototype.slickPlay = function() {
1585 _
.options
.autoplay
= true;
1588 _
.interrupted
= false;
1592 Slick
.prototype.postSlide = function(index
) {
1596 if( !_
.unslicked
) {
1598 _
.$slider
.trigger('afterChange', [_
, index
]);
1600 _
.animating
= false;
1606 if ( _
.options
.autoplay
) {
1610 if (_
.options
.accessibility
=== true) {
1618 Slick
.prototype.prev
= Slick
.prototype.slickPrev = function() {
1630 Slick
.prototype.preventDefault = function(event
) {
1632 event
.preventDefault();
1636 Slick
.prototype.progressiveLazyLoad = function( tryCount
) {
1638 tryCount
= tryCount
|| 1;
1641 $imgsToLoad
= $( 'img[data-lazy]', _
.$slider
),
1646 if ( $imgsToLoad
.length
) {
1648 image
= $imgsToLoad
.first();
1649 imageSource
= image
.attr('data-lazy');
1650 imageToLoad
= document
.createElement('img');
1652 imageToLoad
.onload = function() {
1655 .attr( 'src', imageSource
)
1656 .removeAttr('data-lazy')
1657 .removeClass('slick-loading');
1659 if ( _
.options
.adaptiveHeight
=== true ) {
1663 _
.$slider
.trigger('lazyLoaded', [ _
, image
, imageSource
]);
1664 _
.progressiveLazyLoad();
1668 imageToLoad
.onerror = function() {
1670 if ( tryCount
< 3 ) {
1673 * try to load the image 3 times,
1674 * leave a slight delay so we don't get
1675 * servers blocking the request.
1677 setTimeout( function() {
1678 _
.progressiveLazyLoad( tryCount
+ 1 );
1684 .removeAttr( 'data-lazy' )
1685 .removeClass( 'slick-loading' )
1686 .addClass( 'slick-lazyload-error' );
1688 _
.$slider
.trigger('lazyLoadError', [ _
, image
, imageSource
]);
1690 _
.progressiveLazyLoad();
1696 imageToLoad
.src
= imageSource
;
1700 _
.$slider
.trigger('allImagesLoaded', [ _
]);
1706 Slick
.prototype.refresh = function( initializing
) {
1708 var _
= this, currentSlide
, lastVisibleIndex
;
1710 lastVisibleIndex
= _
.slideCount
- _
.options
.slidesToShow
;
1712 // in non-infinite sliders, we don't want to go past the
1713 // last visible index.
1714 if( !_
.options
.infinite
&& ( _
.currentSlide
> lastVisibleIndex
)) {
1715 _
.currentSlide
= lastVisibleIndex
;
1718 // if less slides than to show, go to start.
1719 if ( _
.slideCount
<= _
.options
.slidesToShow
) {
1724 currentSlide
= _
.currentSlide
;
1728 $.extend(_
, _
.initials
, { currentSlide: currentSlide
});
1732 if( !initializing
) {
1745 Slick
.prototype.registerBreakpoints = function() {
1747 var _
= this, breakpoint
, currentBreakpoint
, l
,
1748 responsiveSettings
= _
.options
.responsive
|| null;
1750 if ( $.type(responsiveSettings
) === 'array' && responsiveSettings
.length
) {
1752 _
.respondTo
= _
.options
.respondTo
|| 'window';
1754 for ( breakpoint
in responsiveSettings
) {
1756 l
= _
.breakpoints
.length
-1;
1757 currentBreakpoint
= responsiveSettings
[breakpoint
].breakpoint
;
1759 if (responsiveSettings
.hasOwnProperty(breakpoint
)) {
1761 // loop through the breakpoints and cut out any existing
1762 // ones with the same breakpoint number, we don't want dupes.
1764 if( _
.breakpoints
[l
] && _
.breakpoints
[l
] === currentBreakpoint
) {
1765 _
.breakpoints
.splice(l
,1);
1770 _
.breakpoints
.push(currentBreakpoint
);
1771 _
.breakpointSettings
[currentBreakpoint
] = responsiveSettings
[breakpoint
].settings
;
1777 _
.breakpoints
.sort(function(a
, b
) {
1778 return ( _
.options
.mobileFirst
) ? a
-b : b
-a
;
1785 Slick
.prototype.reinit = function() {
1791 .children(_
.options
.slide
)
1792 .addClass('slick-slide');
1794 _
.slideCount
= _
.$slides
.length
;
1796 if (_
.currentSlide
>= _
.slideCount
&& _
.currentSlide
!== 0) {
1797 _
.currentSlide
= _
.currentSlide
- _
.options
.slidesToScroll
;
1800 if (_
.slideCount
<= _
.options
.slidesToShow
) {
1804 _
.registerBreakpoints();
1810 _
.initArrowEvents();
1814 _
.cleanUpSlideEvents();
1815 _
.initSlideEvents();
1817 _
.checkResponsive(false, true);
1819 if (_
.options
.focusOnSelect
=== true) {
1820 $(_
.$slideTrack
).children().on('click.slick', _
.selectHandler
);
1823 _
.setSlideClasses(typeof _
.currentSlide
=== 'number' ? _
.currentSlide : 0);
1828 _
.paused
= !_
.options
.autoplay
;
1831 _
.$slider
.trigger('reInit', [_
]);
1835 Slick
.prototype.resize = function() {
1839 if ($(window
).width() !== _
.windowWidth
) {
1840 clearTimeout(_
.windowDelay
);
1841 _
.windowDelay
= window
.setTimeout(function() {
1842 _
.windowWidth
= $(window
).width();
1843 _
.checkResponsive();
1844 if( !_
.unslicked
) { _
.setPosition(); }
1849 Slick
.prototype.removeSlide
= Slick
.prototype.slickRemove = function(index
, removeBefore
, removeAll
) {
1853 if (typeof(index
) === 'boolean') {
1854 removeBefore
= index
;
1855 index
= removeBefore
=== true ? 0 : _
.slideCount
- 1;
1857 index
= removeBefore
=== true ? --index : index
;
1860 if (_
.slideCount
< 1 || index
< 0 || index
> _
.slideCount
- 1) {
1866 if (removeAll
=== true) {
1867 _
.$slideTrack
.children().remove();
1869 _
.$slideTrack
.children(this.options
.slide
).eq(index
).remove();
1872 _
.$slides
= _
.$slideTrack
.children(this.options
.slide
);
1874 _
.$slideTrack
.children(this.options
.slide
).detach();
1876 _
.$slideTrack
.append(_
.$slides
);
1878 _
.$slidesCache
= _
.$slides
;
1884 Slick
.prototype.setCSS = function(position
) {
1890 if (_
.options
.rtl
=== true) {
1891 position
= -position
;
1893 x
= _
.positionProp
== 'left' ? Math
.ceil(position
) + 'px' : '0px';
1894 y
= _
.positionProp
== 'top' ? Math
.ceil(position
) + 'px' : '0px';
1896 positionProps
[_
.positionProp
] = position
;
1898 if (_
.transformsEnabled
=== false) {
1899 _
.$slideTrack
.css(positionProps
);
1902 if (_
.cssTransitions
=== false) {
1903 positionProps
[_
.animType
] = 'translate(' + x
+ ', ' + y
+ ')';
1904 _
.$slideTrack
.css(positionProps
);
1906 positionProps
[_
.animType
] = 'translate3d(' + x
+ ', ' + y
+ ', 0px)';
1907 _
.$slideTrack
.css(positionProps
);
1913 Slick
.prototype.setDimensions = function() {
1917 if (_
.options
.vertical
=== false) {
1918 if (_
.options
.centerMode
=== true) {
1920 padding: ('0px ' + _
.options
.centerPadding
)
1924 _
.$list
.height(_
.$slides
.first().outerHeight(true) * _
.options
.slidesToShow
);
1925 if (_
.options
.centerMode
=== true) {
1927 padding: (_
.options
.centerPadding
+ ' 0px')
1932 _
.listWidth
= _
.$list
.width();
1933 _
.listHeight
= _
.$list
.height();
1936 if (_
.options
.vertical
=== false && _
.options
.variableWidth
=== false) {
1937 _
.slideWidth
= Math
.ceil(_
.listWidth
/ _
.options
.slidesToShow
);
1938 _
.$slideTrack
.width(Math
.ceil((_
.slideWidth
* _
.$slideTrack
.children('.slick-slide').length
)));
1940 } else if (_
.options
.variableWidth
=== true) {
1941 _
.$slideTrack
.width(5000 * _
.slideCount
);
1943 _
.slideWidth
= Math
.ceil(_
.listWidth
);
1944 _
.$slideTrack
.height(Math
.ceil((_
.$slides
.first().outerHeight(true) * _
.$slideTrack
.children('.slick-slide').length
)));
1947 var offset
= _
.$slides
.first().outerWidth(true) - _
.$slides
.first().width();
1948 if (_
.options
.variableWidth
=== false) _
.$slideTrack
.children('.slick-slide').width(_
.slideWidth
- offset
);
1952 Slick
.prototype.setFade = function() {
1957 _
.$slides
.each(function(index
, element
) {
1958 targetLeft
= (_
.slideWidth
* index
) * -1;
1959 if (_
.options
.rtl
=== true) {
1961 position: 'relative',
1964 zIndex: _
.options
.zIndex
- 2,
1969 position: 'relative',
1972 zIndex: _
.options
.zIndex
- 2,
1978 _
.$slides
.eq(_
.currentSlide
).css({
1979 zIndex: _
.options
.zIndex
- 1,
1985 Slick
.prototype.setHeight = function() {
1989 if (_
.options
.slidesToShow
=== 1 && _
.options
.adaptiveHeight
=== true && _
.options
.vertical
=== false) {
1990 var targetHeight
= _
.$slides
.eq(_
.currentSlide
).outerHeight(true);
1991 _
.$list
.css('height', targetHeight
);
1996 Slick
.prototype.setOption
=
1997 Slick
.prototype.slickSetOption = function() {
2000 * accepts arguments in format of:
2002 * - for changing a single option's value:
2003 * .slick("setOption", option, value, refresh )
2005 * - for changing a set of responsive options:
2006 * .slick("setOption", 'responsive', [{}, ...], refresh )
2008 * - for updating multiple values at once (not responsive)
2009 * .slick("setOption", { 'option': value, ... }, refresh )
2012 var _
= this, l
, item
, option
, value
, refresh
= false, type
;
2014 if( $.type( arguments
[0] ) === 'object' ) {
2016 option
= arguments
[0];
2017 refresh
= arguments
[1];
2020 } else if ( $.type( arguments
[0] ) === 'string' ) {
2022 option
= arguments
[0];
2023 value
= arguments
[1];
2024 refresh
= arguments
[2];
2026 if ( arguments
[0] === 'responsive' && $.type( arguments
[1] ) === 'array' ) {
2028 type
= 'responsive';
2030 } else if ( typeof arguments
[1] !== 'undefined' ) {
2038 if ( type
=== 'single' ) {
2040 _
.options
[option
] = value
;
2043 } else if ( type
=== 'multiple' ) {
2045 $.each( option
, function( opt
, val
) {
2047 _
.options
[opt
] = val
;
2052 } else if ( type
=== 'responsive' ) {
2054 for ( item
in value
) {
2056 if( $.type( _
.options
.responsive
) !== 'array' ) {
2058 _
.options
.responsive
= [ value
[item
] ];
2062 l
= _
.options
.responsive
.length
-1;
2064 // loop through the responsive object and splice out duplicates.
2067 if( _
.options
.responsive
[l
].breakpoint
=== value
[item
].breakpoint
) {
2069 _
.options
.responsive
.splice(l
,1);
2077 _
.options
.responsive
.push( value
[item
] );
2094 Slick
.prototype.setPosition = function() {
2102 if (_
.options
.fade
=== false) {
2103 _
.setCSS(_
.getLeft(_
.currentSlide
));
2108 _
.$slider
.trigger('setPosition', [_
]);
2112 Slick
.prototype.setProps = function() {
2115 bodyStyle
= document
.body
.style
;
2117 _
.positionProp
= _
.options
.vertical
=== true ? 'top' : 'left';
2119 if (_
.positionProp
=== 'top') {
2120 _
.$slider
.addClass('slick-vertical');
2122 _
.$slider
.removeClass('slick-vertical');
2125 if (bodyStyle
.WebkitTransition
!== undefined ||
2126 bodyStyle
.MozTransition
!== undefined ||
2127 bodyStyle
.msTransition
!== undefined) {
2128 if (_
.options
.useCSS
=== true) {
2129 _
.cssTransitions
= true;
2133 if ( _
.options
.fade
) {
2134 if ( typeof _
.options
.zIndex
=== 'number' ) {
2135 if( _
.options
.zIndex
< 3 ) {
2136 _
.options
.zIndex
= 3;
2139 _
.options
.zIndex
= _
.defaults
.zIndex
;
2143 if (bodyStyle
.OTransform
!== undefined) {
2144 _
.animType
= 'OTransform';
2145 _
.transformType
= '-o-transform';
2146 _
.transitionType
= 'OTransition';
2147 if (bodyStyle
.perspectiveProperty
=== undefined && bodyStyle
.webkitPerspective
=== undefined) _
.animType
= false;
2149 if (bodyStyle
.MozTransform
!== undefined) {
2150 _
.animType
= 'MozTransform';
2151 _
.transformType
= '-moz-transform';
2152 _
.transitionType
= 'MozTransition';
2153 if (bodyStyle
.perspectiveProperty
=== undefined && bodyStyle
.MozPerspective
=== undefined) _
.animType
= false;
2155 if (bodyStyle
.webkitTransform
!== undefined) {
2156 _
.animType
= 'webkitTransform';
2157 _
.transformType
= '-webkit-transform';
2158 _
.transitionType
= 'webkitTransition';
2159 if (bodyStyle
.perspectiveProperty
=== undefined && bodyStyle
.webkitPerspective
=== undefined) _
.animType
= false;
2161 if (bodyStyle
.msTransform
!== undefined) {
2162 _
.animType
= 'msTransform';
2163 _
.transformType
= '-ms-transform';
2164 _
.transitionType
= 'msTransition';
2165 if (bodyStyle
.msTransform
=== undefined) _
.animType
= false;
2167 if (bodyStyle
.transform
!== undefined && _
.animType
!== false) {
2168 _
.animType
= 'transform';
2169 _
.transformType
= 'transform';
2170 _
.transitionType
= 'transition';
2172 _
.transformsEnabled
= _
.options
.useTransform
&& (_
.animType
!== null && _
.animType
!== false);
2176 Slick
.prototype.setSlideClasses = function(index
) {
2179 centerOffset
, allSlides
, indexOffset
, remainder
;
2181 allSlides
= _
.$slider
2182 .find('.slick-slide')
2183 .removeClass('slick-active slick-center slick-current')
2184 .attr('aria-hidden', 'true');
2188 .addClass('slick-current');
2190 if (_
.options
.centerMode
=== true) {
2192 centerOffset
= Math
.floor(_
.options
.slidesToShow
/ 2);
2194 if (_
.options
.infinite
=== true) {
2196 if (index
>= centerOffset
&& index
<= (_
.slideCount
- 1) - centerOffset
) {
2199 .slice(index
- centerOffset
, index
+ centerOffset
+ 1)
2200 .addClass('slick-active')
2201 .attr('aria-hidden', 'false');
2205 indexOffset
= _
.options
.slidesToShow
+ index
;
2207 .slice(indexOffset
- centerOffset
+ 1, indexOffset
+ centerOffset
+ 2)
2208 .addClass('slick-active')
2209 .attr('aria-hidden', 'false');
2216 .eq(allSlides
.length
- 1 - _
.options
.slidesToShow
)
2217 .addClass('slick-center');
2219 } else if (index
=== _
.slideCount
- 1) {
2222 .eq(_
.options
.slidesToShow
)
2223 .addClass('slick-center');
2231 .addClass('slick-center');
2235 if (index
>= 0 && index
<= (_
.slideCount
- _
.options
.slidesToShow
)) {
2238 .slice(index
, index
+ _
.options
.slidesToShow
)
2239 .addClass('slick-active')
2240 .attr('aria-hidden', 'false');
2242 } else if (allSlides
.length
<= _
.options
.slidesToShow
) {
2245 .addClass('slick-active')
2246 .attr('aria-hidden', 'false');
2250 remainder
= _
.slideCount
% _
.options
.slidesToShow
;
2251 indexOffset
= _
.options
.infinite
=== true ? _
.options
.slidesToShow
+ index : index
;
2253 if (_
.options
.slidesToShow
== _
.options
.slidesToScroll
&& (_
.slideCount
- index
) < _
.options
.slidesToShow
) {
2256 .slice(indexOffset
- (_
.options
.slidesToShow
- remainder
), indexOffset
+ remainder
)
2257 .addClass('slick-active')
2258 .attr('aria-hidden', 'false');
2263 .slice(indexOffset
, indexOffset
+ _
.options
.slidesToShow
)
2264 .addClass('slick-active')
2265 .attr('aria-hidden', 'false');
2273 if (_
.options
.lazyLoad
=== 'ondemand') {
2279 Slick
.prototype.setupInfinite = function() {
2282 i
, slideIndex
, infiniteCount
;
2284 if (_
.options
.fade
=== true) {
2285 _
.options
.centerMode
= false;
2288 if (_
.options
.infinite
=== true && _
.options
.fade
=== false) {
2292 if (_
.slideCount
> _
.options
.slidesToShow
) {
2294 if (_
.options
.centerMode
=== true) {
2295 infiniteCount
= _
.options
.slidesToShow
+ 1;
2297 infiniteCount
= _
.options
.slidesToShow
;
2300 for (i
= _
.slideCount
; i
> (_
.slideCount
-
2301 infiniteCount
); i
-= 1) {
2303 $(_
.$slides
[slideIndex
]).clone(true).attr('id', '')
2304 .attr('data-slick-index', slideIndex
- _
.slideCount
)
2305 .prependTo(_
.$slideTrack
).addClass('slick-cloned');
2307 for (i
= 0; i
< infiniteCount
; i
+= 1) {
2309 $(_
.$slides
[slideIndex
]).clone(true).attr('id', '')
2310 .attr('data-slick-index', slideIndex
+ _
.slideCount
)
2311 .appendTo(_
.$slideTrack
).addClass('slick-cloned');
2313 _
.$slideTrack
.find('.slick-cloned').find('[id]').each(function() {
2314 $(this).attr('id', '');
2323 Slick
.prototype.interrupt = function( toggle
) {
2330 _
.interrupted
= toggle
;
2334 Slick
.prototype.selectHandler = function(event
) {
2339 $(event
.target
).is('.slick-slide') ?
2341 $(event
.target
).parents('.slick-slide');
2343 var index
= parseInt(targetElement
.attr('data-slick-index'));
2345 if (!index
) index
= 0;
2347 if (_
.slideCount
<= _
.options
.slidesToShow
) {
2349 _
.setSlideClasses(index
);
2355 _
.slideHandler(index
);
2359 Slick
.prototype.slideHandler = function(index
, sync
, dontAnimate
) {
2361 var targetSlide
, animSlide
, oldSlide
, slideLeft
, targetLeft
= null,
2362 _
= this, navTarget
;
2364 sync
= sync
|| false;
2366 if (_
.animating
=== true && _
.options
.waitForAnimate
=== true) {
2370 if (_
.options
.fade
=== true && _
.currentSlide
=== index
) {
2374 if (_
.slideCount
<= _
.options
.slidesToShow
) {
2378 if (sync
=== false) {
2382 targetSlide
= index
;
2383 targetLeft
= _
.getLeft(targetSlide
);
2384 slideLeft
= _
.getLeft(_
.currentSlide
);
2386 _
.currentLeft
= _
.swipeLeft
=== null ? slideLeft : _
.swipeLeft
;
2388 if (_
.options
.infinite
=== false && _
.options
.centerMode
=== false && (index
< 0 || index
> _
.getDotCount() * _
.options
.slidesToScroll
)) {
2389 if (_
.options
.fade
=== false) {
2390 targetSlide
= _
.currentSlide
;
2391 if (dontAnimate
!== true) {
2392 _
.animateSlide(slideLeft
, function() {
2393 _
.postSlide(targetSlide
);
2396 _
.postSlide(targetSlide
);
2400 } else if (_
.options
.infinite
=== false && _
.options
.centerMode
=== true && (index
< 0 || index
> (_
.slideCount
- _
.options
.slidesToScroll
))) {
2401 if (_
.options
.fade
=== false) {
2402 targetSlide
= _
.currentSlide
;
2403 if (dontAnimate
!== true) {
2404 _
.animateSlide(slideLeft
, function() {
2405 _
.postSlide(targetSlide
);
2408 _
.postSlide(targetSlide
);
2414 if ( _
.options
.autoplay
) {
2415 clearInterval(_
.autoPlayTimer
);
2418 if (targetSlide
< 0) {
2419 if (_
.slideCount
% _
.options
.slidesToScroll
!== 0) {
2420 animSlide
= _
.slideCount
- (_
.slideCount
% _
.options
.slidesToScroll
);
2422 animSlide
= _
.slideCount
+ targetSlide
;
2424 } else if (targetSlide
>= _
.slideCount
) {
2425 if (_
.slideCount
% _
.options
.slidesToScroll
!== 0) {
2428 animSlide
= targetSlide
- _
.slideCount
;
2431 animSlide
= targetSlide
;
2436 _
.$slider
.trigger('beforeChange', [_
, _
.currentSlide
, animSlide
]);
2438 oldSlide
= _
.currentSlide
;
2439 _
.currentSlide
= animSlide
;
2441 _
.setSlideClasses(_
.currentSlide
);
2443 if ( _
.options
.asNavFor
) {
2445 navTarget
= _
.getNavTarget();
2446 navTarget
= navTarget
.slick('getSlick');
2448 if ( navTarget
.slideCount
<= navTarget
.options
.slidesToShow
) {
2449 navTarget
.setSlideClasses(_
.currentSlide
);
2457 if (_
.options
.fade
=== true) {
2458 if (dontAnimate
!== true) {
2460 _
.fadeSlideOut(oldSlide
);
2462 _
.fadeSlide(animSlide
, function() {
2463 _
.postSlide(animSlide
);
2467 _
.postSlide(animSlide
);
2473 if (dontAnimate
!== true) {
2474 _
.animateSlide(targetLeft
, function() {
2475 _
.postSlide(animSlide
);
2478 _
.postSlide(animSlide
);
2483 Slick
.prototype.startLoad = function() {
2487 if (_
.options
.arrows
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
2489 _
.$prevArrow
.hide();
2490 _
.$nextArrow
.hide();
2494 if (_
.options
.dots
=== true && _
.slideCount
> _
.options
.slidesToShow
) {
2500 _
.$slider
.addClass('slick-loading');
2504 Slick
.prototype.swipeDirection = function() {
2506 var xDist
, yDist
, r
, swipeAngle
, _
= this;
2508 xDist
= _
.touchObject
.startX
- _
.touchObject
.curX
;
2509 yDist
= _
.touchObject
.startY
- _
.touchObject
.curY
;
2510 r
= Math
.atan2(yDist
, xDist
);
2512 swipeAngle
= Math
.round(r
* 180 / Math
.PI
);
2513 if (swipeAngle
< 0) {
2514 swipeAngle
= 360 - Math
.abs(swipeAngle
);
2517 if ((swipeAngle
<= 45) && (swipeAngle
>= 0)) {
2518 return (_
.options
.rtl
=== false ? 'left' : 'right');
2520 if ((swipeAngle
<= 360) && (swipeAngle
>= 315)) {
2521 return (_
.options
.rtl
=== false ? 'left' : 'right');
2523 if ((swipeAngle
>= 135) && (swipeAngle
<= 225)) {
2524 return (_
.options
.rtl
=== false ? 'right' : 'left');
2526 if (_
.options
.verticalSwiping
=== true) {
2527 if ((swipeAngle
>= 35) && (swipeAngle
<= 135)) {
2538 Slick
.prototype.swipeEnd = function(event
) {
2545 _
.interrupted
= false;
2546 _
.shouldClick
= ( _
.touchObject
.swipeLength
> 10 ) ? false : true;
2548 if ( _
.touchObject
.curX
=== undefined ) {
2552 if ( _
.touchObject
.edgeHit
=== true ) {
2553 _
.$slider
.trigger('edge', [_
, _
.swipeDirection() ]);
2556 if ( _
.touchObject
.swipeLength
>= _
.touchObject
.minSwipe
) {
2558 direction
= _
.swipeDirection();
2560 switch ( direction
) {
2566 _
.options
.swipeToSlide
?
2567 _
.checkNavigable( _
.currentSlide
+ _
.getSlideCount() ) :
2568 _
.currentSlide
+ _
.getSlideCount();
2570 _
.currentDirection
= 0;
2578 _
.options
.swipeToSlide
?
2579 _
.checkNavigable( _
.currentSlide
- _
.getSlideCount() ) :
2580 _
.currentSlide
- _
.getSlideCount();
2582 _
.currentDirection
= 1;
2591 if( direction
!= 'vertical' ) {
2593 _
.slideHandler( slideCount
);
2595 _
.$slider
.trigger('swipe', [_
, direction
]);
2601 if ( _
.touchObject
.startX
!== _
.touchObject
.curX
) {
2603 _
.slideHandler( _
.currentSlide
);
2612 Slick
.prototype.swipeHandler = function(event
) {
2616 if ((_
.options
.swipe
=== false) || ('ontouchend' in document
&& _
.options
.swipe
=== false)) {
2618 } else if (_
.options
.draggable
=== false && event
.type
.indexOf('mouse') !== -1) {
2622 _
.touchObject
.fingerCount
= event
.originalEvent
&& event
.originalEvent
.touches
!== undefined ?
2623 event
.originalEvent
.touches
.length : 1;
2625 _
.touchObject
.minSwipe
= _
.listWidth
/ _
.options
2628 if (_
.options
.verticalSwiping
=== true) {
2629 _
.touchObject
.minSwipe
= _
.listHeight
/ _
.options
2633 switch (event
.data
.action
) {
2636 _
.swipeStart(event
);
2651 Slick
.prototype.swipeMove = function(event
) {
2655 curLeft
, swipeDirection
, swipeLength
, positionOffset
, touches
;
2657 touches
= event
.originalEvent
!== undefined ? event
.originalEvent
.touches : null;
2659 if (!_
.dragging
|| touches
&& touches
.length
!== 1) {
2663 curLeft
= _
.getLeft(_
.currentSlide
);
2665 _
.touchObject
.curX
= touches
!== undefined ? touches
[0].pageX : event
.clientX
;
2666 _
.touchObject
.curY
= touches
!== undefined ? touches
[0].pageY : event
.clientY
;
2668 _
.touchObject
.swipeLength
= Math
.round(Math
.sqrt(
2669 Math
.pow(_
.touchObject
.curX
- _
.touchObject
.startX
, 2)));
2671 if (_
.options
.verticalSwiping
=== true) {
2672 _
.touchObject
.swipeLength
= Math
.round(Math
.sqrt(
2673 Math
.pow(_
.touchObject
.curY
- _
.touchObject
.startY
, 2)));
2676 swipeDirection
= _
.swipeDirection();
2678 if (swipeDirection
=== 'vertical') {
2682 if (event
.originalEvent
!== undefined && _
.touchObject
.swipeLength
> 4) {
2683 event
.preventDefault();
2686 positionOffset
= (_
.options
.rtl
=== false ? 1 : -1) * (_
.touchObject
.curX
> _
.touchObject
.startX
? 1 : -1);
2687 if (_
.options
.verticalSwiping
=== true) {
2688 positionOffset
= _
.touchObject
.curY
> _
.touchObject
.startY
? 1 : -1;
2692 swipeLength
= _
.touchObject
.swipeLength
;
2694 _
.touchObject
.edgeHit
= false;
2696 if (_
.options
.infinite
=== false) {
2697 if ((_
.currentSlide
=== 0 && swipeDirection
=== 'right') || (_
.currentSlide
>= _
.getDotCount() && swipeDirection
=== 'left')) {
2698 swipeLength
= _
.touchObject
.swipeLength
* _
.options
.edgeFriction
;
2699 _
.touchObject
.edgeHit
= true;
2703 if (_
.options
.vertical
=== false) {
2704 _
.swipeLeft
= curLeft
+ swipeLength
* positionOffset
;
2706 _
.swipeLeft
= curLeft
+ (swipeLength
* (_
.$list
.height() / _
.listWidth
)) * positionOffset
;
2708 if (_
.options
.verticalSwiping
=== true) {
2709 _
.swipeLeft
= curLeft
+ swipeLength
* positionOffset
;
2712 if (_
.options
.fade
=== true || _
.options
.touchMove
=== false) {
2716 if (_
.animating
=== true) {
2721 _
.setCSS(_
.swipeLeft
);
2725 Slick
.prototype.swipeStart = function(event
) {
2730 _
.interrupted
= true;
2732 if (_
.touchObject
.fingerCount
!== 1 || _
.slideCount
<= _
.options
.slidesToShow
) {
2737 if (event
.originalEvent
!== undefined && event
.originalEvent
.touches
!== undefined) {
2738 touches
= event
.originalEvent
.touches
[0];
2741 _
.touchObject
.startX
= _
.touchObject
.curX
= touches
!== undefined ? touches
.pageX : event
.clientX
;
2742 _
.touchObject
.startY
= _
.touchObject
.curY
= touches
!== undefined ? touches
.pageY : event
.clientY
;
2748 Slick
.prototype.unfilterSlides
= Slick
.prototype.slickUnfilter = function() {
2752 if (_
.$slidesCache
!== null) {
2756 _
.$slideTrack
.children(this.options
.slide
).detach();
2758 _
.$slidesCache
.appendTo(_
.$slideTrack
);
2766 Slick
.prototype.unload = function() {
2770 $('.slick-cloned', _
.$slider
).remove();
2776 if (_
.$prevArrow
&& _
.htmlExpr
.test(_
.options
.prevArrow
)) {
2777 _
.$prevArrow
.remove();
2780 if (_
.$nextArrow
&& _
.htmlExpr
.test(_
.options
.nextArrow
)) {
2781 _
.$nextArrow
.remove();
2785 .removeClass('slick-slide slick-active slick-visible slick-current')
2786 .attr('aria-hidden', 'true')
2791 Slick
.prototype.unslick = function(fromBreakpoint
) {
2794 _
.$slider
.trigger('unslick', [_
, fromBreakpoint
]);
2799 Slick
.prototype.updateArrows = function() {
2804 centerOffset
= Math
.floor(_
.options
.slidesToShow
/ 2);
2806 if ( _
.options
.arrows
=== true &&
2807 _
.slideCount
> _
.options
.slidesToShow
&&
2808 !_
.options
.infinite
) {
2810 _
.$prevArrow
.removeClass('slick-disabled').attr('aria-disabled', 'false');
2811 _
.$nextArrow
.removeClass('slick-disabled').attr('aria-disabled', 'false');
2813 if (_
.currentSlide
=== 0) {
2815 _
.$prevArrow
.addClass('slick-disabled').attr('aria-disabled', 'true');
2816 _
.$nextArrow
.removeClass('slick-disabled').attr('aria-disabled', 'false');
2818 } else if (_
.currentSlide
>= _
.slideCount
- _
.options
.slidesToShow
&& _
.options
.centerMode
=== false) {
2820 _
.$nextArrow
.addClass('slick-disabled').attr('aria-disabled', 'true');
2821 _
.$prevArrow
.removeClass('slick-disabled').attr('aria-disabled', 'false');
2823 } else if (_
.currentSlide
>= _
.slideCount
- 1 && _
.options
.centerMode
=== true) {
2825 _
.$nextArrow
.addClass('slick-disabled').attr('aria-disabled', 'true');
2826 _
.$prevArrow
.removeClass('slick-disabled').attr('aria-disabled', 'false');
2834 Slick
.prototype.updateDots = function() {
2838 if (_
.$dots
!== null) {
2842 .removeClass('slick-active')
2843 .attr('aria-hidden', 'true');
2847 .eq(Math
.floor(_
.currentSlide
/ _
.options
.slidesToScroll
))
2848 .addClass('slick-active')
2849 .attr('aria-hidden', 'false');
2855 Slick
.prototype.visibility = function() {
2859 if ( _
.options
.autoplay
) {
2861 if ( document
[_
.hidden
] ) {
2863 _
.interrupted
= true;
2867 _
.interrupted
= false;
2875 $.fn
.slick = function() {
2878 args
= Array
.prototype.slice
.call(arguments
, 1),
2882 for (i
= 0; i
< l
; i
++) {
2883 if (typeof opt
== 'object' || typeof opt
== 'undefined')
2884 _
[i
].slick
= new Slick(_
[i
], opt
);
2886 ret
= _
[i
].slick
[opt
].apply(_
[i
].slick
, args
);
2887 if (typeof ret
!= 'undefined') return ret
;