UNPKG

swiper

Version:

Most modern mobile touch slider and framework with hardware accelerated transitions

1,479 lines (1,430 loc) 129 kB
import { a as getWindow, g as getDocument } from './ssr-window.esm.mjs'; import { a as elementParents, o as elementStyle, e as elementChildren, s as setCSSProperty, f as elementOuterSize, p as elementNextAll, q as elementPrevAll, j as getTranslate, r as animateCSSModeScroll, n as nextTick, t as showWarning, c as createElement, d as now, u as extend, h as elementIndex, v as deleteProps } from './utils.mjs'; let support; function calcSupport() { const window = getWindow(); const document = getDocument(); return { smoothScroll: document.documentElement && document.documentElement.style && 'scrollBehavior' in document.documentElement.style, touch: !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch) }; } function getSupport() { if (!support) { support = calcSupport(); } return support; } let deviceCached; function calcDevice(_temp) { let { userAgent } = _temp === void 0 ? {} : _temp; const support = getSupport(); const window = getWindow(); const platform = window.navigator.platform; const ua = userAgent || window.navigator.userAgent; const device = { ios: false, android: false }; const screenWidth = window.screen.width; const screenHeight = window.screen.height; const android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); // eslint-disable-line let ipad = ua.match(/(iPad).*OS\s([\d_]+)/); const ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); const iphone = !ipad && ua.match(/(iPhone\sOS|iOS)\s([\d_]+)/); const windows = platform === 'Win32'; let macos = platform === 'MacIntel'; // iPadOs 13 fix const iPadScreens = ['1024x1366', '1366x1024', '834x1194', '1194x834', '834x1112', '1112x834', '768x1024', '1024x768', '820x1180', '1180x820', '810x1080', '1080x810']; if (!ipad && macos && support.touch && iPadScreens.indexOf(`${screenWidth}x${screenHeight}`) >= 0) { ipad = ua.match(/(Version)\/([\d.]+)/); if (!ipad) ipad = [0, 1, '13_0_0']; macos = false; } // Android if (android && !windows) { device.os = 'android'; device.android = true; } if (ipad || iphone || ipod) { device.os = 'ios'; device.ios = true; } // Export object return device; } function getDevice(overrides) { if (overrides === void 0) { overrides = {}; } if (!deviceCached) { deviceCached = calcDevice(overrides); } return deviceCached; } let browser; function calcBrowser() { const window = getWindow(); const device = getDevice(); let needPerspectiveFix = false; function isSafari() { const ua = window.navigator.userAgent.toLowerCase(); return ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0 && ua.indexOf('android') < 0; } if (isSafari()) { const ua = String(window.navigator.userAgent); if (ua.includes('Version/')) { const [major, minor] = ua.split('Version/')[1].split(' ')[0].split('.').map(num => Number(num)); needPerspectiveFix = major < 16 || major === 16 && minor < 2; } } const isWebView = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent); const isSafariBrowser = isSafari(); const need3dFix = isSafariBrowser || isWebView && device.ios; return { isSafari: needPerspectiveFix || isSafariBrowser, needPerspectiveFix, need3dFix, isWebView }; } function getBrowser() { if (!browser) { browser = calcBrowser(); } return browser; } function Resize(_ref) { let { swiper, on, emit } = _ref; const window = getWindow(); let observer = null; let animationFrame = null; const resizeHandler = () => { if (!swiper || swiper.destroyed || !swiper.initialized) return; emit('beforeResize'); emit('resize'); }; const createObserver = () => { if (!swiper || swiper.destroyed || !swiper.initialized) return; observer = new ResizeObserver(entries => { animationFrame = window.requestAnimationFrame(() => { const { width, height } = swiper; let newWidth = width; let newHeight = height; entries.forEach(_ref2 => { let { contentBoxSize, contentRect, target } = _ref2; if (target && target !== swiper.el) return; newWidth = contentRect ? contentRect.width : (contentBoxSize[0] || contentBoxSize).inlineSize; newHeight = contentRect ? contentRect.height : (contentBoxSize[0] || contentBoxSize).blockSize; }); if (newWidth !== width || newHeight !== height) { resizeHandler(); } }); }); observer.observe(swiper.el); }; const removeObserver = () => { if (animationFrame) { window.cancelAnimationFrame(animationFrame); } if (observer && observer.unobserve && swiper.el) { observer.unobserve(swiper.el); observer = null; } }; const orientationChangeHandler = () => { if (!swiper || swiper.destroyed || !swiper.initialized) return; emit('orientationchange'); }; on('init', () => { if (swiper.params.resizeObserver && typeof window.ResizeObserver !== 'undefined') { createObserver(); return; } window.addEventListener('resize', resizeHandler); window.addEventListener('orientationchange', orientationChangeHandler); }); on('destroy', () => { removeObserver(); window.removeEventListener('resize', resizeHandler); window.removeEventListener('orientationchange', orientationChangeHandler); }); } function Observer(_ref) { let { swiper, extendParams, on, emit } = _ref; const observers = []; const window = getWindow(); const attach = function (target, options) { if (options === void 0) { options = {}; } const ObserverFunc = window.MutationObserver || window.WebkitMutationObserver; const observer = new ObserverFunc(mutations => { // The observerUpdate event should only be triggered // once despite the number of mutations. Additional // triggers are redundant and are very costly if (swiper.__preventObserver__) return; if (mutations.length === 1) { emit('observerUpdate', mutations[0]); return; } const observerUpdate = function observerUpdate() { emit('observerUpdate', mutations[0]); }; if (window.requestAnimationFrame) { window.requestAnimationFrame(observerUpdate); } else { window.setTimeout(observerUpdate, 0); } }); observer.observe(target, { attributes: typeof options.attributes === 'undefined' ? true : options.attributes, childList: typeof options.childList === 'undefined' ? true : options.childList, characterData: typeof options.characterData === 'undefined' ? true : options.characterData }); observers.push(observer); }; const init = () => { if (!swiper.params.observer) return; if (swiper.params.observeParents) { const containerParents = elementParents(swiper.hostEl); for (let i = 0; i < containerParents.length; i += 1) { attach(containerParents[i]); } } // Observe container attach(swiper.hostEl, { childList: swiper.params.observeSlideChildren }); // Observe wrapper attach(swiper.wrapperEl, { attributes: false }); }; const destroy = () => { observers.forEach(observer => { observer.disconnect(); }); observers.splice(0, observers.length); }; extendParams({ observer: false, observeParents: false, observeSlideChildren: false }); on('init', init); on('destroy', destroy); } /* eslint-disable no-underscore-dangle */ var eventsEmitter = { on(events, handler, priority) { const self = this; if (!self.eventsListeners || self.destroyed) return self; if (typeof handler !== 'function') return self; const method = priority ? 'unshift' : 'push'; events.split(' ').forEach(event => { if (!self.eventsListeners[event]) self.eventsListeners[event] = []; self.eventsListeners[event][method](handler); }); return self; }, once(events, handler, priority) { const self = this; if (!self.eventsListeners || self.destroyed) return self; if (typeof handler !== 'function') return self; function onceHandler() { self.off(events, onceHandler); if (onceHandler.__emitterProxy) { delete onceHandler.__emitterProxy; } for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } handler.apply(self, args); } onceHandler.__emitterProxy = handler; return self.on(events, onceHandler, priority); }, onAny(handler, priority) { const self = this; if (!self.eventsListeners || self.destroyed) return self; if (typeof handler !== 'function') return self; const method = priority ? 'unshift' : 'push'; if (self.eventsAnyListeners.indexOf(handler) < 0) { self.eventsAnyListeners[method](handler); } return self; }, offAny(handler) { const self = this; if (!self.eventsListeners || self.destroyed) return self; if (!self.eventsAnyListeners) return self; const index = self.eventsAnyListeners.indexOf(handler); if (index >= 0) { self.eventsAnyListeners.splice(index, 1); } return self; }, off(events, handler) { const self = this; if (!self.eventsListeners || self.destroyed) return self; if (!self.eventsListeners) return self; events.split(' ').forEach(event => { if (typeof handler === 'undefined') { self.eventsListeners[event] = []; } else if (self.eventsListeners[event]) { self.eventsListeners[event].forEach((eventHandler, index) => { if (eventHandler === handler || eventHandler.__emitterProxy && eventHandler.__emitterProxy === handler) { self.eventsListeners[event].splice(index, 1); } }); } }); return self; }, emit() { const self = this; if (!self.eventsListeners || self.destroyed) return self; if (!self.eventsListeners) return self; let events; let data; let context; for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; } if (typeof args[0] === 'string' || Array.isArray(args[0])) { events = args[0]; data = args.slice(1, args.length); context = self; } else { events = args[0].events; data = args[0].data; context = args[0].context || self; } data.unshift(context); const eventsArray = Array.isArray(events) ? events : events.split(' '); eventsArray.forEach(event => { if (self.eventsAnyListeners && self.eventsAnyListeners.length) { self.eventsAnyListeners.forEach(eventHandler => { eventHandler.apply(context, [event, ...data]); }); } if (self.eventsListeners && self.eventsListeners[event]) { self.eventsListeners[event].forEach(eventHandler => { eventHandler.apply(context, data); }); } }); return self; } }; function updateSize() { const swiper = this; let width; let height; const el = swiper.el; if (typeof swiper.params.width !== 'undefined' && swiper.params.width !== null) { width = swiper.params.width; } else { width = el.clientWidth; } if (typeof swiper.params.height !== 'undefined' && swiper.params.height !== null) { height = swiper.params.height; } else { height = el.clientHeight; } if (width === 0 && swiper.isHorizontal() || height === 0 && swiper.isVertical()) { return; } // Subtract paddings width = width - parseInt(elementStyle(el, 'padding-left') || 0, 10) - parseInt(elementStyle(el, 'padding-right') || 0, 10); height = height - parseInt(elementStyle(el, 'padding-top') || 0, 10) - parseInt(elementStyle(el, 'padding-bottom') || 0, 10); if (Number.isNaN(width)) width = 0; if (Number.isNaN(height)) height = 0; Object.assign(swiper, { width, height, size: swiper.isHorizontal() ? width : height }); } function updateSlides() { const swiper = this; function getDirectionPropertyValue(node, label) { return parseFloat(node.getPropertyValue(swiper.getDirectionLabel(label)) || 0); } const params = swiper.params; const { wrapperEl, slidesEl, size: swiperSize, rtlTranslate: rtl, wrongRTL } = swiper; const isVirtual = swiper.virtual && params.virtual.enabled; const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length; const slides = elementChildren(slidesEl, `.${swiper.params.slideClass}, swiper-slide`); const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length; let snapGrid = []; const slidesGrid = []; const slidesSizesGrid = []; let offsetBefore = params.slidesOffsetBefore; if (typeof offsetBefore === 'function') { offsetBefore = params.slidesOffsetBefore.call(swiper); } let offsetAfter = params.slidesOffsetAfter; if (typeof offsetAfter === 'function') { offsetAfter = params.slidesOffsetAfter.call(swiper); } const previousSnapGridLength = swiper.snapGrid.length; const previousSlidesGridLength = swiper.slidesGrid.length; let spaceBetween = params.spaceBetween; let slidePosition = -offsetBefore; let prevSlideSize = 0; let index = 0; if (typeof swiperSize === 'undefined') { return; } if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) { spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize; } else if (typeof spaceBetween === 'string') { spaceBetween = parseFloat(spaceBetween); } swiper.virtualSize = -spaceBetween; // reset margins slides.forEach(slideEl => { if (rtl) { slideEl.style.marginLeft = ''; } else { slideEl.style.marginRight = ''; } slideEl.style.marginBottom = ''; slideEl.style.marginTop = ''; }); // reset cssMode offsets if (params.centeredSlides && params.cssMode) { setCSSProperty(wrapperEl, '--swiper-centered-offset-before', ''); setCSSProperty(wrapperEl, '--swiper-centered-offset-after', ''); } const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid; if (gridEnabled) { swiper.grid.initSlides(slides); } else if (swiper.grid) { swiper.grid.unsetSlides(); } // Calc slides let slideSize; const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params.breakpoints).filter(key => { return typeof params.breakpoints[key].slidesPerView !== 'undefined'; }).length > 0; for (let i = 0; i < slidesLength; i += 1) { slideSize = 0; let slide; if (slides[i]) slide = slides[i]; if (gridEnabled) { swiper.grid.updateSlide(i, slide, slides); } if (slides[i] && elementStyle(slide, 'display') === 'none') continue; // eslint-disable-line if (params.slidesPerView === 'auto') { if (shouldResetSlideSize) { slides[i].style[swiper.getDirectionLabel('width')] = ``; } const slideStyles = getComputedStyle(slide); const currentTransform = slide.style.transform; const currentWebKitTransform = slide.style.webkitTransform; if (currentTransform) { slide.style.transform = 'none'; } if (currentWebKitTransform) { slide.style.webkitTransform = 'none'; } if (params.roundLengths) { slideSize = swiper.isHorizontal() ? elementOuterSize(slide, 'width', true) : elementOuterSize(slide, 'height', true); } else { // eslint-disable-next-line const width = getDirectionPropertyValue(slideStyles, 'width'); const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left'); const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right'); const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left'); const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right'); const boxSizing = slideStyles.getPropertyValue('box-sizing'); if (boxSizing && boxSizing === 'border-box') { slideSize = width + marginLeft + marginRight; } else { const { clientWidth, offsetWidth } = slide; slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight + (offsetWidth - clientWidth); } } if (currentTransform) { slide.style.transform = currentTransform; } if (currentWebKitTransform) { slide.style.webkitTransform = currentWebKitTransform; } if (params.roundLengths) slideSize = Math.floor(slideSize); } else { slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView; if (params.roundLengths) slideSize = Math.floor(slideSize); if (slides[i]) { slides[i].style[swiper.getDirectionLabel('width')] = `${slideSize}px`; } } if (slides[i]) { slides[i].swiperSlideSize = slideSize; } slidesSizesGrid.push(slideSize); if (params.centeredSlides) { slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween; if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween; if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween; if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0; if (params.roundLengths) slidePosition = Math.floor(slidePosition); if (index % params.slidesPerGroup === 0) snapGrid.push(slidePosition); slidesGrid.push(slidePosition); } else { if (params.roundLengths) slidePosition = Math.floor(slidePosition); if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition); slidesGrid.push(slidePosition); slidePosition = slidePosition + slideSize + spaceBetween; } swiper.virtualSize += slideSize + spaceBetween; prevSlideSize = slideSize; index += 1; } swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter; if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) { wrapperEl.style.width = `${swiper.virtualSize + spaceBetween}px`; } if (params.setWrapperSize) { wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`; } if (gridEnabled) { swiper.grid.updateWrapperSize(slideSize, snapGrid); } // Remove last grid elements depending on width if (!params.centeredSlides) { const newSlidesGrid = []; for (let i = 0; i < snapGrid.length; i += 1) { let slidesGridItem = snapGrid[i]; if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem); if (snapGrid[i] <= swiper.virtualSize - swiperSize) { newSlidesGrid.push(slidesGridItem); } } snapGrid = newSlidesGrid; if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) { snapGrid.push(swiper.virtualSize - swiperSize); } } if (isVirtual && params.loop) { const size = slidesSizesGrid[0] + spaceBetween; if (params.slidesPerGroup > 1) { const groups = Math.ceil((swiper.virtual.slidesBefore + swiper.virtual.slidesAfter) / params.slidesPerGroup); const groupSize = size * params.slidesPerGroup; for (let i = 0; i < groups; i += 1) { snapGrid.push(snapGrid[snapGrid.length - 1] + groupSize); } } for (let i = 0; i < swiper.virtual.slidesBefore + swiper.virtual.slidesAfter; i += 1) { if (params.slidesPerGroup === 1) { snapGrid.push(snapGrid[snapGrid.length - 1] + size); } slidesGrid.push(slidesGrid[slidesGrid.length - 1] + size); swiper.virtualSize += size; } } if (snapGrid.length === 0) snapGrid = [0]; if (spaceBetween !== 0) { const key = swiper.isHorizontal() && rtl ? 'marginLeft' : swiper.getDirectionLabel('marginRight'); slides.filter((_, slideIndex) => { if (!params.cssMode || params.loop) return true; if (slideIndex === slides.length - 1) { return false; } return true; }).forEach(slideEl => { slideEl.style[key] = `${spaceBetween}px`; }); } if (params.centeredSlides && params.centeredSlidesBounds) { let allSlidesSize = 0; slidesSizesGrid.forEach(slideSizeValue => { allSlidesSize += slideSizeValue + (spaceBetween || 0); }); allSlidesSize -= spaceBetween; const maxSnap = allSlidesSize - swiperSize; snapGrid = snapGrid.map(snap => { if (snap <= 0) return -offsetBefore; if (snap > maxSnap) return maxSnap + offsetAfter; return snap; }); } if (params.centerInsufficientSlides) { let allSlidesSize = 0; slidesSizesGrid.forEach(slideSizeValue => { allSlidesSize += slideSizeValue + (spaceBetween || 0); }); allSlidesSize -= spaceBetween; const offsetSize = (params.slidesOffsetBefore || 0) + (params.slidesOffsetAfter || 0); if (allSlidesSize + offsetSize < swiperSize) { const allSlidesOffset = (swiperSize - allSlidesSize - offsetSize) / 2; snapGrid.forEach((snap, snapIndex) => { snapGrid[snapIndex] = snap - allSlidesOffset; }); slidesGrid.forEach((snap, snapIndex) => { slidesGrid[snapIndex] = snap + allSlidesOffset; }); } } Object.assign(swiper, { slides, snapGrid, slidesGrid, slidesSizesGrid }); if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) { setCSSProperty(wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`); setCSSProperty(wrapperEl, '--swiper-centered-offset-after', `${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`); const addToSnapGrid = -swiper.snapGrid[0]; const addToSlidesGrid = -swiper.slidesGrid[0]; swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid); swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid); } if (slidesLength !== previousSlidesLength) { swiper.emit('slidesLengthChange'); } if (snapGrid.length !== previousSnapGridLength) { if (swiper.params.watchOverflow) swiper.checkOverflow(); swiper.emit('snapGridLengthChange'); } if (slidesGrid.length !== previousSlidesGridLength) { swiper.emit('slidesGridLengthChange'); } if (params.watchSlidesProgress) { swiper.updateSlidesOffset(); } swiper.emit('slidesUpdated'); if (!isVirtual && !params.cssMode && (params.effect === 'slide' || params.effect === 'fade')) { const backFaceHiddenClass = `${params.containerModifierClass}backface-hidden`; const hasClassBackfaceClassAdded = swiper.el.classList.contains(backFaceHiddenClass); if (slidesLength <= params.maxBackfaceHiddenSlides) { if (!hasClassBackfaceClassAdded) swiper.el.classList.add(backFaceHiddenClass); } else if (hasClassBackfaceClassAdded) { swiper.el.classList.remove(backFaceHiddenClass); } } } function updateAutoHeight(speed) { const swiper = this; const activeSlides = []; const isVirtual = swiper.virtual && swiper.params.virtual.enabled; let newHeight = 0; let i; if (typeof speed === 'number') { swiper.setTransition(speed); } else if (speed === true) { swiper.setTransition(swiper.params.speed); } const getSlideByIndex = index => { if (isVirtual) { return swiper.slides[swiper.getSlideIndexByData(index)]; } return swiper.slides[index]; }; // Find slides currently in view if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) { if (swiper.params.centeredSlides) { (swiper.visibleSlides || []).forEach(slide => { activeSlides.push(slide); }); } else { for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) { const index = swiper.activeIndex + i; if (index > swiper.slides.length && !isVirtual) break; activeSlides.push(getSlideByIndex(index)); } } } else { activeSlides.push(getSlideByIndex(swiper.activeIndex)); } // Find new height from highest slide in view for (i = 0; i < activeSlides.length; i += 1) { if (typeof activeSlides[i] !== 'undefined') { const height = activeSlides[i].offsetHeight; newHeight = height > newHeight ? height : newHeight; } } // Update Height if (newHeight || newHeight === 0) swiper.wrapperEl.style.height = `${newHeight}px`; } function updateSlidesOffset() { const swiper = this; const slides = swiper.slides; // eslint-disable-next-line const minusOffset = swiper.isElement ? swiper.isHorizontal() ? swiper.wrapperEl.offsetLeft : swiper.wrapperEl.offsetTop : 0; for (let i = 0; i < slides.length; i += 1) { slides[i].swiperSlideOffset = (swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop) - minusOffset - swiper.cssOverflowAdjustment(); } } const toggleSlideClasses$1 = (slideEl, condition, className) => { if (condition && !slideEl.classList.contains(className)) { slideEl.classList.add(className); } else if (!condition && slideEl.classList.contains(className)) { slideEl.classList.remove(className); } }; function updateSlidesProgress(translate) { if (translate === void 0) { translate = this && this.translate || 0; } const swiper = this; const params = swiper.params; const { slides, rtlTranslate: rtl, snapGrid } = swiper; if (slides.length === 0) return; if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset(); let offsetCenter = -translate; if (rtl) offsetCenter = translate; swiper.visibleSlidesIndexes = []; swiper.visibleSlides = []; let spaceBetween = params.spaceBetween; if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) { spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size; } else if (typeof spaceBetween === 'string') { spaceBetween = parseFloat(spaceBetween); } for (let i = 0; i < slides.length; i += 1) { const slide = slides[i]; let slideOffset = slide.swiperSlideOffset; if (params.cssMode && params.centeredSlides) { slideOffset -= slides[0].swiperSlideOffset; } const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + spaceBetween); const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + spaceBetween); const slideBefore = -(offsetCenter - slideOffset); const slideAfter = slideBefore + swiper.slidesSizesGrid[i]; const isFullyVisible = slideBefore >= 0 && slideBefore <= swiper.size - swiper.slidesSizesGrid[i]; const isVisible = slideBefore >= 0 && slideBefore < swiper.size - 1 || slideAfter > 1 && slideAfter <= swiper.size || slideBefore <= 0 && slideAfter >= swiper.size; if (isVisible) { swiper.visibleSlides.push(slide); swiper.visibleSlidesIndexes.push(i); } toggleSlideClasses$1(slide, isVisible, params.slideVisibleClass); toggleSlideClasses$1(slide, isFullyVisible, params.slideFullyVisibleClass); slide.progress = rtl ? -slideProgress : slideProgress; slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress; } } function updateProgress(translate) { const swiper = this; if (typeof translate === 'undefined') { const multiplier = swiper.rtlTranslate ? -1 : 1; // eslint-disable-next-line translate = swiper && swiper.translate && swiper.translate * multiplier || 0; } const params = swiper.params; const translatesDiff = swiper.maxTranslate() - swiper.minTranslate(); let { progress, isBeginning, isEnd, progressLoop } = swiper; const wasBeginning = isBeginning; const wasEnd = isEnd; if (translatesDiff === 0) { progress = 0; isBeginning = true; isEnd = true; } else { progress = (translate - swiper.minTranslate()) / translatesDiff; const isBeginningRounded = Math.abs(translate - swiper.minTranslate()) < 1; const isEndRounded = Math.abs(translate - swiper.maxTranslate()) < 1; isBeginning = isBeginningRounded || progress <= 0; isEnd = isEndRounded || progress >= 1; if (isBeginningRounded) progress = 0; if (isEndRounded) progress = 1; } if (params.loop) { const firstSlideIndex = swiper.getSlideIndexByData(0); const lastSlideIndex = swiper.getSlideIndexByData(swiper.slides.length - 1); const firstSlideTranslate = swiper.slidesGrid[firstSlideIndex]; const lastSlideTranslate = swiper.slidesGrid[lastSlideIndex]; const translateMax = swiper.slidesGrid[swiper.slidesGrid.length - 1]; const translateAbs = Math.abs(translate); if (translateAbs >= firstSlideTranslate) { progressLoop = (translateAbs - firstSlideTranslate) / translateMax; } else { progressLoop = (translateAbs + translateMax - lastSlideTranslate) / translateMax; } if (progressLoop > 1) progressLoop -= 1; } Object.assign(swiper, { progress, progressLoop, isBeginning, isEnd }); if (params.watchSlidesProgress || params.centeredSlides && params.autoHeight) swiper.updateSlidesProgress(translate); if (isBeginning && !wasBeginning) { swiper.emit('reachBeginning toEdge'); } if (isEnd && !wasEnd) { swiper.emit('reachEnd toEdge'); } if (wasBeginning && !isBeginning || wasEnd && !isEnd) { swiper.emit('fromEdge'); } swiper.emit('progress', progress); } const toggleSlideClasses = (slideEl, condition, className) => { if (condition && !slideEl.classList.contains(className)) { slideEl.classList.add(className); } else if (!condition && slideEl.classList.contains(className)) { slideEl.classList.remove(className); } }; function updateSlidesClasses() { const swiper = this; const { slides, params, slidesEl, activeIndex } = swiper; const isVirtual = swiper.virtual && params.virtual.enabled; const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1; const getFilteredSlide = selector => { return elementChildren(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`)[0]; }; let activeSlide; let prevSlide; let nextSlide; if (isVirtual) { if (params.loop) { let slideIndex = activeIndex - swiper.virtual.slidesBefore; if (slideIndex < 0) slideIndex = swiper.virtual.slides.length + slideIndex; if (slideIndex >= swiper.virtual.slides.length) slideIndex -= swiper.virtual.slides.length; activeSlide = getFilteredSlide(`[data-swiper-slide-index="${slideIndex}"]`); } else { activeSlide = getFilteredSlide(`[data-swiper-slide-index="${activeIndex}"]`); } } else { if (gridEnabled) { activeSlide = slides.filter(slideEl => slideEl.column === activeIndex)[0]; nextSlide = slides.filter(slideEl => slideEl.column === activeIndex + 1)[0]; prevSlide = slides.filter(slideEl => slideEl.column === activeIndex - 1)[0]; } else { activeSlide = slides[activeIndex]; } } if (activeSlide) { if (!gridEnabled) { // Next Slide nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0]; if (params.loop && !nextSlide) { nextSlide = slides[0]; } // Prev Slide prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0]; if (params.loop && !prevSlide === 0) { prevSlide = slides[slides.length - 1]; } } } slides.forEach(slideEl => { toggleSlideClasses(slideEl, slideEl === activeSlide, params.slideActiveClass); toggleSlideClasses(slideEl, slideEl === nextSlide, params.slideNextClass); toggleSlideClasses(slideEl, slideEl === prevSlide, params.slidePrevClass); }); swiper.emitSlidesClasses(); } const processLazyPreloader = (swiper, imageEl) => { if (!swiper || swiper.destroyed || !swiper.params) return; const slideSelector = () => swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`; const slideEl = imageEl.closest(slideSelector()); if (slideEl) { let lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`); if (!lazyEl && swiper.isElement) { if (slideEl.shadowRoot) { lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`); } else { // init later requestAnimationFrame(() => { if (slideEl.shadowRoot) { lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`); if (lazyEl) lazyEl.remove(); } }); } } if (lazyEl) lazyEl.remove(); } }; const unlazy = (swiper, index) => { if (!swiper.slides[index]) return; const imageEl = swiper.slides[index].querySelector('[loading="lazy"]'); if (imageEl) imageEl.removeAttribute('loading'); }; const preload = swiper => { if (!swiper || swiper.destroyed || !swiper.params) return; let amount = swiper.params.lazyPreloadPrevNext; const len = swiper.slides.length; if (!len || !amount || amount < 0) return; amount = Math.min(amount, len); const slidesPerView = swiper.params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(swiper.params.slidesPerView); const activeIndex = swiper.activeIndex; if (swiper.params.grid && swiper.params.grid.rows > 1) { const activeColumn = activeIndex; const preloadColumns = [activeColumn - amount]; preloadColumns.push(...Array.from({ length: amount }).map((_, i) => { return activeColumn + slidesPerView + i; })); swiper.slides.forEach((slideEl, i) => { if (preloadColumns.includes(slideEl.column)) unlazy(swiper, i); }); return; } const slideIndexLastInView = activeIndex + slidesPerView - 1; if (swiper.params.rewind || swiper.params.loop) { for (let i = activeIndex - amount; i <= slideIndexLastInView + amount; i += 1) { const realIndex = (i % len + len) % len; if (realIndex < activeIndex || realIndex > slideIndexLastInView) unlazy(swiper, realIndex); } } else { for (let i = Math.max(activeIndex - amount, 0); i <= Math.min(slideIndexLastInView + amount, len - 1); i += 1) { if (i !== activeIndex && (i > slideIndexLastInView || i < activeIndex)) { unlazy(swiper, i); } } } }; function getActiveIndexByTranslate(swiper) { const { slidesGrid, params } = swiper; const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate; let activeIndex; for (let i = 0; i < slidesGrid.length; i += 1) { if (typeof slidesGrid[i + 1] !== 'undefined') { if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1] - (slidesGrid[i + 1] - slidesGrid[i]) / 2) { activeIndex = i; } else if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1]) { activeIndex = i + 1; } } else if (translate >= slidesGrid[i]) { activeIndex = i; } } // Normalize slideIndex if (params.normalizeSlideIndex) { if (activeIndex < 0 || typeof activeIndex === 'undefined') activeIndex = 0; } return activeIndex; } function updateActiveIndex(newActiveIndex) { const swiper = this; const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate; const { snapGrid, params, activeIndex: previousIndex, realIndex: previousRealIndex, snapIndex: previousSnapIndex } = swiper; let activeIndex = newActiveIndex; let snapIndex; const getVirtualRealIndex = aIndex => { let realIndex = aIndex - swiper.virtual.slidesBefore; if (realIndex < 0) { realIndex = swiper.virtual.slides.length + realIndex; } if (realIndex >= swiper.virtual.slides.length) { realIndex -= swiper.virtual.slides.length; } return realIndex; }; if (typeof activeIndex === 'undefined') { activeIndex = getActiveIndexByTranslate(swiper); } if (snapGrid.indexOf(translate) >= 0) { snapIndex = snapGrid.indexOf(translate); } else { const skip = Math.min(params.slidesPerGroupSkip, activeIndex); snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup); } if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1; if (activeIndex === previousIndex && !swiper.params.loop) { if (snapIndex !== previousSnapIndex) { swiper.snapIndex = snapIndex; swiper.emit('snapIndexChange'); } return; } if (activeIndex === previousIndex && swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) { swiper.realIndex = getVirtualRealIndex(activeIndex); return; } const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1; // Get real index let realIndex; if (swiper.virtual && params.virtual.enabled && params.loop) { realIndex = getVirtualRealIndex(activeIndex); } else if (gridEnabled) { const firstSlideInColumn = swiper.slides.filter(slideEl => slideEl.column === activeIndex)[0]; let activeSlideIndex = parseInt(firstSlideInColumn.getAttribute('data-swiper-slide-index'), 10); if (Number.isNaN(activeSlideIndex)) { activeSlideIndex = Math.max(swiper.slides.indexOf(firstSlideInColumn), 0); } realIndex = Math.floor(activeSlideIndex / params.grid.rows); } else if (swiper.slides[activeIndex]) { const slideIndex = swiper.slides[activeIndex].getAttribute('data-swiper-slide-index'); if (slideIndex) { realIndex = parseInt(slideIndex, 10); } else { realIndex = activeIndex; } } else { realIndex = activeIndex; } Object.assign(swiper, { previousSnapIndex, snapIndex, previousRealIndex, realIndex, previousIndex, activeIndex }); if (swiper.initialized) { preload(swiper); } swiper.emit('activeIndexChange'); swiper.emit('snapIndexChange'); if (swiper.initialized || swiper.params.runCallbacksOnInit) { if (previousRealIndex !== realIndex) { swiper.emit('realIndexChange'); } swiper.emit('slideChange'); } } function updateClickedSlide(el, path) { const swiper = this; const params = swiper.params; let slide = el.closest(`.${params.slideClass}, swiper-slide`); if (!slide && swiper.isElement && path && path.length > 1 && path.includes(el)) { [...path.slice(path.indexOf(el) + 1, path.length)].forEach(pathEl => { if (!slide && pathEl.matches && pathEl.matches(`.${params.slideClass}, swiper-slide`)) { slide = pathEl; } }); } let slideFound = false; let slideIndex; if (slide) { for (let i = 0; i < swiper.slides.length; i += 1) { if (swiper.slides[i] === slide) { slideFound = true; slideIndex = i; break; } } } if (slide && slideFound) { swiper.clickedSlide = slide; if (swiper.virtual && swiper.params.virtual.enabled) { swiper.clickedIndex = parseInt(slide.getAttribute('data-swiper-slide-index'), 10); } else { swiper.clickedIndex = slideIndex; } } else { swiper.clickedSlide = undefined; swiper.clickedIndex = undefined; return; } if (params.slideToClickedSlide && swiper.clickedIndex !== undefined && swiper.clickedIndex !== swiper.activeIndex) { swiper.slideToClickedSlide(); } } var update = { updateSize, updateSlides, updateAutoHeight, updateSlidesOffset, updateSlidesProgress, updateProgress, updateSlidesClasses, updateActiveIndex, updateClickedSlide }; function getSwiperTranslate(axis) { if (axis === void 0) { axis = this.isHorizontal() ? 'x' : 'y'; } const swiper = this; const { params, rtlTranslate: rtl, translate, wrapperEl } = swiper; if (params.virtualTranslate) { return rtl ? -translate : translate; } if (params.cssMode) { return translate; } let currentTranslate = getTranslate(wrapperEl, axis); currentTranslate += swiper.cssOverflowAdjustment(); if (rtl) currentTranslate = -currentTranslate; return currentTranslate || 0; } function setTranslate(translate, byController) { const swiper = this; const { rtlTranslate: rtl, params, wrapperEl, progress } = swiper; let x = 0; let y = 0; const z = 0; if (swiper.isHorizontal()) { x = rtl ? -translate : translate; } else { y = translate; } if (params.roundLengths) { x = Math.floor(x); y = Math.floor(y); } swiper.previousTranslate = swiper.translate; swiper.translate = swiper.isHorizontal() ? x : y; if (params.cssMode) { wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y; } else if (!params.virtualTranslate) { if (swiper.isHorizontal()) { x -= swiper.cssOverflowAdjustment(); } else { y -= swiper.cssOverflowAdjustment(); } wrapperEl.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`; } // Check if we need to update progress let newProgress; const translatesDiff = swiper.maxTranslate() - swiper.minTranslate(); if (translatesDiff === 0) { newProgress = 0; } else { newProgress = (translate - swiper.minTranslate()) / translatesDiff; } if (newProgress !== progress) { swiper.updateProgress(translate); } swiper.emit('setTranslate', swiper.translate, byController); } function minTranslate() { return -this.snapGrid[0]; } function maxTranslate() { return -this.snapGrid[this.snapGrid.length - 1]; } function translateTo(translate, speed, runCallbacks, translateBounds, internal) { if (translate === void 0) { translate = 0; } if (speed === void 0) { speed = this.params.speed; } if (runCallbacks === void 0) { runCallbacks = true; } if (translateBounds === void 0) { translateBounds = true; } const swiper = this; const { params, wrapperEl } = swiper; if (swiper.animating && params.preventInteractionOnTransition) { return false; } const minTranslate = swiper.minTranslate(); const maxTranslate = swiper.maxTranslate(); let newTranslate; if (translateBounds && translate > minTranslate) newTranslate = minTranslate;else if (translateBounds && translate < maxTranslate) newTranslate = maxTranslate;else newTranslate = translate; // Update progress swiper.updateProgress(newTranslate); if (params.cssMode) { const isH = swiper.isHorizontal(); if (speed === 0) { wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = -newTranslate; } else { if (!swiper.support.smoothScroll) { animateCSSModeScroll({ swiper, targetPosition: -newTranslate, side: isH ? 'left' : 'top' }); return true; } wrapperEl.scrollTo({ [isH ? 'left' : 'top']: -newTranslate, behavior: 'smooth' }); } return true; } if (speed === 0) { swiper.setTransition(0); swiper.setTranslate(newTranslate); if (runCallbacks) { swiper.emit('beforeTransitionStart', speed, internal); swiper.emit('transitionEnd'); } } else { swiper.setTransition(speed); swiper.setTranslate(newTranslate); if (runCallbacks) { swiper.emit('beforeTransitionStart', speed, internal); swiper.emit('transitionStart'); } if (!swiper.animating) { swiper.animating = true; if (!swiper.onTranslateToWrapperTransitionEnd) { swiper.onTranslateToWrapperTransitionEnd = function transitionEnd(e) { if (!swiper || swiper.destroyed) return; if (e.target !== this) return; swiper.wrapperEl.removeEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd); swiper.onTranslateToWrapperTransitionEnd = null; delete swiper.onTranslateToWrapperTransitionEnd; swiper.animating = false; if (runCallbacks) { swiper.emit('transitionEnd'); } }; } swiper.wrapperEl.addEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd); } } return true; } var translate = { getTranslate: getSwiperTranslate, setTranslate, minTranslate, maxTranslate, translateTo }; function setTransition(duration, byController) { const swiper = this; if (!swiper.params.cssMode) { swiper.wrapperEl.style.transitionDuration = `${duration}ms`; swiper.wrapperEl.style.transitionDelay = duration === 0 ? `0ms` : ''; } swiper.emit('setTransition', duration, byController); } function transitionEmit(_ref) { let { swiper, runCallbacks, direction, step } = _ref; const { activeIndex, previousIndex } = swiper; let dir = direction; if (!dir) { if (activeIndex > previousIndex) dir = 'next';else if (activeIndex < previousIndex) dir = 'prev';else dir = 'reset'; } swiper.emit(`transition${step}`); if (runCallbacks && activeIndex !== previousIndex) { if (dir === 'reset') { swiper.emit(`slideResetTransition${step}`); return; } swiper.emit(`slideChangeTransition${step}`); if (dir === 'next') { swiper.emit(`slideNextTransition${step}`); } else { swiper.emit(`slidePrevTransition${step}`); } } } function transitionStart(runCallbacks, direction) { if (runCallbacks === void 0) { runCallbacks = true; } const swiper = this; const { params } = swiper; if (params.cssMode) return; if (params.autoHeight) { swiper.updateAutoHeight(); } transitionEmit({ swiper, runCallbacks, direction, step: 'Start' }); } function transitionEnd(runCallbacks, direction) { if (runCallbacks === void 0) { runCallbacks = true; } const swiper = this; const { params } = swiper; swiper.animating = false; if (params.cssMode) return; swiper.setTransition(0); transitionEmit({ swiper, runCallbacks, direction, step: 'End' }); } var transition = { setTransition, transitionStart, transitionEnd }; function slideTo(index, speed, runCallbacks, internal, initial) { if (index === void 0) { index = 0; } if (runCallbacks === void 0) { runCallbacks = true; } if (typeof index === 'string') { index = parseInt(index, 10); } const swiper = this; let slideIndex = index; if (slideIndex < 0) slideIndex = 0; const { params, snapGrid, slidesGrid, previousIndex, activeIndex, rtlTranslate: rtl, wrapperEl, enabled } = swiper; if (!enabled && !internal && !initial || swiper.destroyed || swiper.animating && params.preventInteractionOnTransition) { return false; } if (typeof speed === 'undefined') { speed = swiper.params.speed; } const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex); let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup); if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1; const translate = -snapGrid[snapIndex]; // Normalize slideIndex if (params.normalizeSlideIndex) { for (let i = 0; i < slidesGrid.length; i += 1) { const normalizedTranslate = -Math.floor(translate * 100); const normalizedGrid = Math.floor(slidesGrid[i] * 100); const normalizedGridNext = Math.floor(slidesGrid[i + 1] * 100); if (typeof slidesGrid[i + 1] !== 'undefined') { if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext - (normalizedGridNext - normalizedGrid) / 2) { slideIndex = i; } else if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext) { slideIndex = i + 1; } } else if (normalizedTranslate >= normalizedGrid) { slideIndex = i; } } } // Directions locks if (swiper.initialized && slideIndex !== activeIndex) { if (!swiper.allowSlideNext && (rtl ? translate > swiper.translate && translate > swiper.minTranslate() : translate < swiper.translate && translate < swiper.minTranslate())) { return false; } if (!swiper.allowSlidePrev && translate > swiper.translate && translate > swiper.maxTranslate()) { if ((activeIndex || 0) !== slideIndex) { return false; } } } if (slideIndex !== (previousIndex || 0) && runCallbacks) { swiper.emit('beforeSlideChangeStart'); } // Update progress swiper.updateProgress(translate); let direction; if (slideIndex > activeIndex) direction = 'next';else if (slideIndex < activeIndex) direction = 'prev';else direction = 'reset'; // Update Index if (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate) { swiper.updateActiveIndex(slideIndex); // Update Height if (params.autoHeight) { swiper.updateAutoHeight(); } swiper.updateSlidesClasses(); if (params.effect !== 'slide') { swiper.setTranslate(translate); } if (direction !== 'reset') { swiper.transitionStart(runCallbacks, direction); swiper.transitionEnd(runCallbacks, direction); } return false; } if (params.cssMode) { const isH = swiper.isHorizontal(); const t = rtl ? translate : -translate; if (speed === 0) { const isVirtual = swiper.virtual && swiper.params.virtual.enabled; if (isVirtual) { swiper.wrapperEl.style.scrollSnapType = 'none'; swiper._immediateVirtual = true; } if (isVirtual && !swiper._cssModeVirtualInitialSet && swiper.params.initialSlide > 0) { swiper._cssModeVirtualInitialSet = true; requestAnimationFrame(() => { wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t; }); } else { wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t; } if (isVirtual) { requestAnimationFrame(() => { swiper.wrapperEl.style.scrollSnapType = '';