package.swiper-vue.mjs Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of swiper Show documentation
Show all versions of swiper Show documentation
Most modern mobile touch slider and framework with hardware accelerated transitions
/**
* Swiper Vue 11.1.10
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2024 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: August 21, 2024
*/
import { h, ref, onUpdated, provide, watch, nextTick, onMounted, onBeforeUnmount, onBeforeUpdate, computed, inject } from 'vue';
import { S as Swiper$1 } from './shared/swiper-core.mjs';
import { g as getParams, a as getChangedParams, u as updateOnVirtualData, m as mountSwiper } from './shared/update-on-virtual-data.mjs';
import { e as extend, u as updateSwiper, d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination } from './shared/update-swiper.mjs';
function getChildren(originalSlots, slidesRef, oldSlidesRef) {
if (originalSlots === void 0) {
originalSlots = {};
}
const slides = [];
const slots = {
'container-start': [],
'container-end': [],
'wrapper-start': [],
'wrapper-end': []
};
const getSlidesFromElements = (els, slotName) => {
if (!Array.isArray(els)) {
return;
}
els.forEach(vnode => {
const isFragment = typeof vnode.type === 'symbol';
if (slotName === 'default') slotName = 'container-end';
if (isFragment && vnode.children) {
getSlidesFromElements(vnode.children, slotName);
} else if (vnode.type && (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper') || vnode.componentOptions && vnode.componentOptions.tag === 'SwiperSlide') {
slides.push(vnode);
} else if (slots[slotName]) {
slots[slotName].push(vnode);
}
});
};
Object.keys(originalSlots).forEach(slotName => {
if (typeof originalSlots[slotName] !== 'function') return;
const els = originalSlots[slotName]();
getSlidesFromElements(els, slotName);
});
oldSlidesRef.value = slidesRef.value;
slidesRef.value = slides;
return {
slides,
slots
};
}
function renderVirtual(swiperRef, slides, virtualData) {
if (!virtualData) return null;
const getSlideIndex = index => {
let slideIndex = index;
if (index < 0) {
slideIndex = slides.length + index;
} else if (slideIndex >= slides.length) {
// eslint-disable-next-line
slideIndex = slideIndex - slides.length;
}
return slideIndex;
};
const style = swiperRef.value.isHorizontal() ? {
[swiperRef.value.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
} : {
top: `${virtualData.offset}px`
};
const {
from,
to
} = virtualData;
const loopFrom = swiperRef.value.params.loop ? -slides.length : 0;
const loopTo = swiperRef.value.params.loop ? slides.length * 2 : slides.length;
const slidesToRender = [];
for (let i = loopFrom; i < loopTo; i += 1) {
if (i >= from && i <= to && slidesToRender.length < slides.length) {
slidesToRender.push(slides[getSlideIndex(i)]);
}
}
return slidesToRender.map(slide => {
if (!slide.props) slide.props = {};
if (!slide.props.style) slide.props.style = {};
slide.props.swiperRef = swiperRef;
slide.props.style = style;
if (slide.type) {
return h(slide.type, {
...slide.props
}, slide.children);
} else if (slide.componentOptions) {
return h(slide.componentOptions.Ctor, {
...slide.props
}, slide.componentOptions.children);
}
});
}
const Swiper = {
name: 'Swiper',
props: {
tag: {
type: String,
default: 'div'
},
wrapperTag: {
type: String,
default: 'div'
},
modules: {
type: Array,
default: undefined
},
init: {
type: Boolean,
default: undefined
},
direction: {
type: String,
default: undefined
},
oneWayMovement: {
type: Boolean,
default: undefined
},
swiperElementNodeName: {
type: String,
default: 'SWIPER-CONTAINER'
},
touchEventsTarget: {
type: String,
default: undefined
},
initialSlide: {
type: Number,
default: undefined
},
speed: {
type: Number,
default: undefined
},
cssMode: {
type: Boolean,
default: undefined
},
updateOnWindowResize: {
type: Boolean,
default: undefined
},
resizeObserver: {
type: Boolean,
default: undefined
},
nested: {
type: Boolean,
default: undefined
},
focusableElements: {
type: String,
default: undefined
},
width: {
type: Number,
default: undefined
},
height: {
type: Number,
default: undefined
},
preventInteractionOnTransition: {
type: Boolean,
default: undefined
},
userAgent: {
type: String,
default: undefined
},
url: {
type: String,
default: undefined
},
edgeSwipeDetection: {
type: [Boolean, String],
default: undefined
},
edgeSwipeThreshold: {
type: Number,
default: undefined
},
autoHeight: {
type: Boolean,
default: undefined
},
setWrapperSize: {
type: Boolean,
default: undefined
},
virtualTranslate: {
type: Boolean,
default: undefined
},
effect: {
type: String,
default: undefined
},
breakpoints: {
type: Object,
default: undefined
},
breakpointsBase: {
type: String,
default: undefined
},
spaceBetween: {
type: [Number, String],
default: undefined
},
slidesPerView: {
type: [Number, String],
default: undefined
},
maxBackfaceHiddenSlides: {
type: Number,
default: undefined
},
slidesPerGroup: {
type: Number,
default: undefined
},
slidesPerGroupSkip: {
type: Number,
default: undefined
},
slidesPerGroupAuto: {
type: Boolean,
default: undefined
},
centeredSlides: {
type: Boolean,
default: undefined
},
centeredSlidesBounds: {
type: Boolean,
default: undefined
},
slidesOffsetBefore: {
type: Number,
default: undefined
},
slidesOffsetAfter: {
type: Number,
default: undefined
},
normalizeSlideIndex: {
type: Boolean,
default: undefined
},
centerInsufficientSlides: {
type: Boolean,
default: undefined
},
watchOverflow: {
type: Boolean,
default: undefined
},
roundLengths: {
type: Boolean,
default: undefined
},
touchRatio: {
type: Number,
default: undefined
},
touchAngle: {
type: Number,
default: undefined
},
simulateTouch: {
type: Boolean,
default: undefined
},
shortSwipes: {
type: Boolean,
default: undefined
},
longSwipes: {
type: Boolean,
default: undefined
},
longSwipesRatio: {
type: Number,
default: undefined
},
longSwipesMs: {
type: Number,
default: undefined
},
followFinger: {
type: Boolean,
default: undefined
},
allowTouchMove: {
type: Boolean,
default: undefined
},
threshold: {
type: Number,
default: undefined
},
touchMoveStopPropagation: {
type: Boolean,
default: undefined
},
touchStartPreventDefault: {
type: Boolean,
default: undefined
},
touchStartForcePreventDefault: {
type: Boolean,
default: undefined
},
touchReleaseOnEdges: {
type: Boolean,
default: undefined
},
uniqueNavElements: {
type: Boolean,
default: undefined
},
resistance: {
type: Boolean,
default: undefined
},
resistanceRatio: {
type: Number,
default: undefined
},
watchSlidesProgress: {
type: Boolean,
default: undefined
},
grabCursor: {
type: Boolean,
default: undefined
},
preventClicks: {
type: Boolean,
default: undefined
},
preventClicksPropagation: {
type: Boolean,
default: undefined
},
slideToClickedSlide: {
type: Boolean,
default: undefined
},
loop: {
type: Boolean,
default: undefined
},
loopedSlides: {
type: Number,
default: undefined
},
loopPreventsSliding: {
type: Boolean,
default: undefined
},
rewind: {
type: Boolean,
default: undefined
},
allowSlidePrev: {
type: Boolean,
default: undefined
},
allowSlideNext: {
type: Boolean,
default: undefined
},
swipeHandler: {
type: Boolean,
default: undefined
},
noSwiping: {
type: Boolean,
default: undefined
},
noSwipingClass: {
type: String,
default: undefined
},
noSwipingSelector: {
type: String,
default: undefined
},
passiveListeners: {
type: Boolean,
default: undefined
},
containerModifierClass: {
type: String,
default: undefined
},
slideClass: {
type: String,
default: undefined
},
slideActiveClass: {
type: String,
default: undefined
},
slideVisibleClass: {
type: String,
default: undefined
},
slideFullyVisibleClass: {
type: String,
default: undefined
},
slideBlankClass: {
type: String,
default: undefined
},
slideNextClass: {
type: String,
default: undefined
},
slidePrevClass: {
type: String,
default: undefined
},
wrapperClass: {
type: String,
default: undefined
},
lazyPreloaderClass: {
type: String,
default: undefined
},
lazyPreloadPrevNext: {
type: Number,
default: undefined
},
runCallbacksOnInit: {
type: Boolean,
default: undefined
},
observer: {
type: Boolean,
default: undefined
},
observeParents: {
type: Boolean,
default: undefined
},
observeSlideChildren: {
type: Boolean,
default: undefined
},
a11y: {
type: [Boolean, Object],
default: undefined
},
autoplay: {
type: [Boolean, Object],
default: undefined
},
controller: {
type: Object,
default: undefined
},
coverflowEffect: {
type: Object,
default: undefined
},
cubeEffect: {
type: Object,
default: undefined
},
fadeEffect: {
type: Object,
default: undefined
},
flipEffect: {
type: Object,
default: undefined
},
creativeEffect: {
type: Object,
default: undefined
},
cardsEffect: {
type: Object,
default: undefined
},
hashNavigation: {
type: [Boolean, Object],
default: undefined
},
history: {
type: [Boolean, Object],
default: undefined
},
keyboard: {
type: [Boolean, Object],
default: undefined
},
mousewheel: {
type: [Boolean, Object],
default: undefined
},
navigation: {
type: [Boolean, Object],
default: undefined
},
pagination: {
type: [Boolean, Object],
default: undefined
},
parallax: {
type: [Boolean, Object],
default: undefined
},
scrollbar: {
type: [Boolean, Object],
default: undefined
},
thumbs: {
type: Object,
default: undefined
},
virtual: {
type: [Boolean, Object],
default: undefined
},
zoom: {
type: [Boolean, Object],
default: undefined
},
grid: {
type: [Object],
default: undefined
},
freeMode: {
type: [Boolean, Object],
default: undefined
},
enabled: {
type: Boolean,
default: undefined
}
},
emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', '_freeModeNoMomentumRelease', 'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'autoplayPause', 'autoplayResume', 'autoplayTimeLeft', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart', 'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick', 'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'init', 'keyPress', 'lock', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow', 'navigationPrev', 'navigationNext', 'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow', 'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll', 'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate', 'slidesUpdated', 'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd', 'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart', 'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove', 'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap', 'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart', 'unlock', 'update', 'virtualUpdate', 'zoomChange'],
setup(props, _ref) {
let {
slots: originalSlots,
emit
} = _ref;
const {
tag: Tag,
wrapperTag: WrapperTag
} = props;
const containerClasses = ref('swiper');
const virtualData = ref(null);
const breakpointChanged = ref(false);
const initializedRef = ref(false);
const swiperElRef = ref(null);
const swiperRef = ref(null);
const oldPassedParamsRef = ref(null);
const slidesRef = {
value: []
};
const oldSlidesRef = {
value: []
};
const nextElRef = ref(null);
const prevElRef = ref(null);
const paginationElRef = ref(null);
const scrollbarElRef = ref(null);
const {
params: swiperParams,
passedParams
} = getParams(props, false);
getChildren(originalSlots, slidesRef, oldSlidesRef);
oldPassedParamsRef.value = passedParams;
oldSlidesRef.value = slidesRef.value;
const onBeforeBreakpoint = () => {
getChildren(originalSlots, slidesRef, oldSlidesRef);
breakpointChanged.value = true;
};
swiperParams.onAny = function (event) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
emit(event, ...args);
};
Object.assign(swiperParams.on, {
_beforeBreakpoint: onBeforeBreakpoint,
_containerClasses(swiper, classes) {
containerClasses.value = classes;
}
});
// init Swiper
const passParams = {
...swiperParams
};
delete passParams.wrapperClass;
swiperRef.value = new Swiper$1(passParams);
if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
swiperRef.value.virtual.slides = slidesRef.value;
const extendWith = {
cache: false,
slides: slidesRef.value,
renderExternal: data => {
virtualData.value = data;
},
renderExternalUpdate: false
};
extend(swiperRef.value.params.virtual, extendWith);
extend(swiperRef.value.originalParams.virtual, extendWith);
}
onUpdated(() => {
// set initialized flag
if (!initializedRef.value && swiperRef.value) {
swiperRef.value.emitSlidesClasses();
initializedRef.value = true;
}
// watch for params change
const {
passedParams: newPassedParams
} = getParams(props, false);
const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value, c => c.props && c.props.key);
oldPassedParamsRef.value = newPassedParams;
if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
updateSwiper({
swiper: swiperRef.value,
slides: slidesRef.value,
passedParams: newPassedParams,
changedParams,
nextEl: nextElRef.value,
prevEl: prevElRef.value,
scrollbarEl: scrollbarElRef.value,
paginationEl: paginationElRef.value
});
}
breakpointChanged.value = false;
});
provide('swiper', swiperRef);
// update on virtual update
watch(virtualData, () => {
nextTick(() => {
updateOnVirtualData(swiperRef.value);
});
});
// mount swiper
onMounted(() => {
if (!swiperElRef.value) return;
mountSwiper({
el: swiperElRef.value,
nextEl: nextElRef.value,
prevEl: prevElRef.value,
paginationEl: paginationElRef.value,
scrollbarEl: scrollbarElRef.value,
swiper: swiperRef.value
}, swiperParams);
emit('swiper', swiperRef.value);
});
onBeforeUnmount(() => {
if (swiperRef.value && !swiperRef.value.destroyed) {
swiperRef.value.destroy(true, false);
}
});
// bypass swiper instance to slides
function renderSlides(slides) {
if (swiperParams.virtual) {
return renderVirtual(swiperRef, slides, virtualData.value);
}
slides.forEach((slide, index) => {
if (!slide.props) slide.props = {};
slide.props.swiperRef = swiperRef;
slide.props.swiperSlideIndex = index;
});
return slides;
}
return () => {
const {
slides,
slots
} = getChildren(originalSlots, slidesRef, oldSlidesRef);
return h(Tag, {
ref: swiperElRef,
class: uniqueClasses(containerClasses.value)
}, [slots['container-start'], h(WrapperTag, {
class: wrapperClass(swiperParams.wrapperClass)
}, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), needsNavigation(props) && [h('div', {
ref: prevElRef,
class: 'swiper-button-prev'
}), h('div', {
ref: nextElRef,
class: 'swiper-button-next'
})], needsScrollbar(props) && h('div', {
ref: scrollbarElRef,
class: 'swiper-scrollbar'
}), needsPagination(props) && h('div', {
ref: paginationElRef,
class: 'swiper-pagination'
}), slots['container-end']]);
};
}
};
const SwiperSlide = {
name: 'SwiperSlide',
props: {
tag: {
type: String,
default: 'div'
},
swiperRef: {
type: Object,
required: false
},
swiperSlideIndex: {
type: Number,
default: undefined,
required: false
},
zoom: {
type: Boolean,
default: undefined,
required: false
},
lazy: {
type: Boolean,
default: false,
required: false
},
virtualIndex: {
type: [String, Number],
default: undefined
}
},
setup(props, _ref) {
let {
slots
} = _ref;
let eventAttached = false;
const {
swiperRef
} = props;
const slideElRef = ref(null);
const slideClasses = ref('swiper-slide');
const lazyLoaded = ref(false);
function updateClasses(swiper, el, classNames) {
if (el === slideElRef.value) {
slideClasses.value = classNames;
}
}
onMounted(() => {
if (!swiperRef || !swiperRef.value) return;
swiperRef.value.on('_slideClass', updateClasses);
eventAttached = true;
});
onBeforeUpdate(() => {
if (eventAttached || !swiperRef || !swiperRef.value) return;
swiperRef.value.on('_slideClass', updateClasses);
eventAttached = true;
});
onUpdated(() => {
if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
if (typeof props.swiperSlideIndex !== 'undefined') {
slideElRef.value.swiperSlideIndex = props.swiperSlideIndex;
}
if (swiperRef.value.destroyed) {
if (slideClasses.value !== 'swiper-slide') {
slideClasses.value = 'swiper-slide';
}
}
});
onBeforeUnmount(() => {
if (!swiperRef || !swiperRef.value) return;
swiperRef.value.off('_slideClass', updateClasses);
});
const slideData = computed(() => ({
isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0,
isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0,
isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0
}));
provide('swiperSlide', slideData);
const onLoad = () => {
lazyLoaded.value = true;
};
return () => {
return h(props.tag, {
class: uniqueClasses(`${slideClasses.value}`),
ref: slideElRef,
'data-swiper-slide-index': typeof props.virtualIndex === 'undefined' && swiperRef && swiperRef.value && swiperRef.value.params.loop ? props.swiperSlideIndex : props.virtualIndex,
onLoadCapture: onLoad
}, props.zoom ? h('div', {
class: 'swiper-zoom-container',
'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
}, [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
class: 'swiper-lazy-preloader'
})]) : [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
class: 'swiper-lazy-preloader'
})]);
};
}
};
const useSwiperSlide = () => {
return inject('swiperSlide');
};
const useSwiper = () => {
return inject('swiper');
};
export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };