Initial commit: GamePortrait 竖屏版 - 深色豪华主题

This commit is contained in:
li
2026-01-16 17:47:53 +08:00
commit 40976e4b45
26611 changed files with 2843638 additions and 0 deletions
+20
View File
@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2019 Vladimir Kharlampidi
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+11
View File
@@ -0,0 +1,11 @@
Swiper
==========
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
# Getting Started
* [Getting Started Guide](https://swiperjs.com/get-started/)
* [API](https://swiperjs.com/swiper-api/)
* [Demos](https://swiperjs.com/demos/)
+40
View File
@@ -0,0 +1,40 @@
import { paramsList } from './params-list.js';
import { isObject } from './utils.js';
function getChangedParams(swiperParams, oldParams, children, oldChildren, getKey) {
const keys = [];
if (!oldParams) return keys;
const addKey = key => {
if (keys.indexOf(key) < 0) keys.push(key);
};
if (children && oldChildren) {
const oldChildrenKeys = oldChildren.map(getKey);
const childrenKeys = children.map(getKey);
if (oldChildrenKeys.join('') !== childrenKeys.join('')) addKey('children');
if (oldChildren.length !== children.length) addKey('children');
}
const watchParams = paramsList.filter(key => key[0] === '_').map(key => key.replace(/_/, ''));
watchParams.forEach(key => {
if (key in swiperParams && key in oldParams) {
if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
const newKeys = Object.keys(swiperParams[key]);
const oldKeys = Object.keys(oldParams[key]);
if (newKeys.length !== oldKeys.length) {
addKey(key);
} else {
newKeys.forEach(newKey => {
if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
addKey(key);
}
});
oldKeys.forEach(oldKey => {
if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
});
}
} else if (swiperParams[key] !== oldParams[key]) {
addKey(key);
}
}
});
return keys;
}
export { getChangedParams };
+50
View File
@@ -0,0 +1,50 @@
import Swiper from 'swiper';
import { isObject, extend } from './utils.js';
import { paramsList } from './params-list.js';
function getParams(obj = {}, splitEvents = true) {
const params = {
on: {}
};
const events = {};
const passedParams = {};
extend(params, Swiper.defaults);
extend(params, Swiper.extendedDefaults);
params._emitClasses = true;
params.init = false;
const rest = {};
const allowedParams = paramsList.map(key => key.replace(/_/, ''));
const plainObj = Object.assign({}, obj);
Object.keys(plainObj).forEach(key => {
if (typeof obj[key] === 'undefined') return;
if (allowedParams.indexOf(key) >= 0) {
if (isObject(obj[key])) {
params[key] = {};
passedParams[key] = {};
extend(params[key], obj[key]);
extend(passedParams[key], obj[key]);
} else {
params[key] = obj[key];
passedParams[key] = obj[key];
}
} else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
if (splitEvents) {
events[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
} else {
params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
}
} else {
rest[key] = obj[key];
}
});
['navigation', 'pagination', 'scrollbar'].forEach(key => {
if (params[key] === true) params[key] = {};
if (params[key] === false) delete params[key];
});
return {
params,
passedParams,
rest,
events
};
}
export { getParams };
+26
View File
@@ -0,0 +1,26 @@
import { needsNavigation, needsPagination, needsScrollbar } from './utils.js';
function mountSwiper({
el,
nextEl,
prevEl,
paginationEl,
scrollbarEl,
swiper
}, swiperParams) {
if (needsNavigation(swiperParams) && nextEl && prevEl) {
swiper.params.navigation.nextEl = nextEl;
swiper.originalParams.navigation.nextEl = nextEl;
swiper.params.navigation.prevEl = prevEl;
swiper.originalParams.navigation.prevEl = prevEl;
}
if (needsPagination(swiperParams) && paginationEl) {
swiper.params.pagination.el = paginationEl;
swiper.originalParams.pagination.el = paginationEl;
}
if (needsScrollbar(swiperParams) && scrollbarEl) {
swiper.params.scrollbar.el = scrollbarEl;
swiper.originalParams.scrollbar.el = scrollbarEl;
}
swiper.init(el);
}
export { mountSwiper };
+5
View File
@@ -0,0 +1,5 @@
/* underscore in name -> watch for changes */
const paramsList = ['eventsPrefix', 'modules', 'init', '_direction', 'oneWayMovement', 'touchEventsTarget', 'initialSlide', '_speed', 'cssMode', 'updateOnWindowResize', 'resizeObserver', 'nested', 'focusableElements', '_enabled', '_width', '_height', 'preventInteractionOnTransition', 'userAgent', 'url', '_edgeSwipeDetection', '_edgeSwipeThreshold', '_freeMode', '_autoHeight', 'setWrapperSize', 'virtualTranslate', '_effect', 'breakpoints', '_spaceBetween', '_slidesPerView', 'maxBackfaceHiddenSlides', '_grid', '_slidesPerGroup', '_slidesPerGroupSkip', '_slidesPerGroupAuto', '_centeredSlides', '_centeredSlidesBounds', '_slidesOffsetBefore', '_slidesOffsetAfter', 'normalizeSlideIndex', '_centerInsufficientSlides', '_watchOverflow', 'roundLengths', 'touchRatio', 'touchAngle', 'simulateTouch', '_shortSwipes', '_longSwipes', 'longSwipesRatio', 'longSwipesMs', '_followFinger', 'allowTouchMove', '_threshold', 'touchMoveStopPropagation', 'touchStartPreventDefault', 'touchStartForcePreventDefault', 'touchReleaseOnEdges', 'uniqueNavElements', '_resistance', '_resistanceRatio', '_watchSlidesProgress', '_grabCursor', 'preventClicks', 'preventClicksPropagation', '_slideToClickedSlide', '_loop', 'loopedSlides', 'loopPreventsSliding', '_rewind', '_allowSlidePrev', '_allowSlideNext', '_swipeHandler', '_noSwiping', 'noSwipingClass', 'noSwipingSelector', 'passiveListeners', 'containerModifierClass', 'slideClass', 'slideActiveClass', 'slideVisibleClass', 'slideNextClass', 'slidePrevClass', 'wrapperClass', 'lazyPreloaderClass', 'runCallbacksOnInit', 'observer', 'observeParents', 'observeSlideChildren',
// modules
'a11y', '_autoplay', '_controller', 'coverflowEffect', 'cubeEffect', 'fadeEffect', 'flipEffect', 'creativeEffect', 'cardsEffect', 'hashNavigation', 'history', 'keyboard', 'mousewheel', '_navigation', '_pagination', 'parallax', '_scrollbar', '_thumbs', 'virtual', 'zoom', 'control', 'injectStyles', 'injectStylesUrls'];
export { paramsList };
+9
View File
@@ -0,0 +1,9 @@
export const updateOnVirtualData = swiper => {
if (!swiper || swiper.destroyed || !swiper.params.virtual || swiper.params.virtual && !swiper.params.virtual.enabled) return;
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
swiper.parallax.setTranslate();
}
};
+161
View File
@@ -0,0 +1,161 @@
import { isObject, extend } from './utils.js';
function updateSwiper({
swiper,
slides,
passedParams,
changedParams,
nextEl,
prevEl,
scrollbarEl,
paginationEl
}) {
const updateParams = changedParams.filter(key => key !== 'children' && key !== 'direction' && key !== 'wrapperClass');
const {
params: currentParams,
pagination,
navigation,
scrollbar,
virtual,
thumbs
} = swiper;
let needThumbsInit;
let needControllerInit;
let needPaginationInit;
let needScrollbarInit;
let needNavigationInit;
let loopNeedDestroy;
let loopNeedEnable;
let loopNeedReloop;
if (changedParams.includes('thumbs') && passedParams.thumbs && passedParams.thumbs.swiper && currentParams.thumbs && !currentParams.thumbs.swiper) {
needThumbsInit = true;
}
if (changedParams.includes('controller') && passedParams.controller && passedParams.controller.control && currentParams.controller && !currentParams.controller.control) {
needControllerInit = true;
}
if (changedParams.includes('pagination') && passedParams.pagination && (passedParams.pagination.el || paginationEl) && (currentParams.pagination || currentParams.pagination === false) && pagination && !pagination.el) {
needPaginationInit = true;
}
if (changedParams.includes('scrollbar') && passedParams.scrollbar && (passedParams.scrollbar.el || scrollbarEl) && (currentParams.scrollbar || currentParams.scrollbar === false) && scrollbar && !scrollbar.el) {
needScrollbarInit = true;
}
if (changedParams.includes('navigation') && passedParams.navigation && (passedParams.navigation.prevEl || prevEl) && (passedParams.navigation.nextEl || nextEl) && (currentParams.navigation || currentParams.navigation === false) && navigation && !navigation.prevEl && !navigation.nextEl) {
needNavigationInit = true;
}
const destroyModule = mod => {
if (!swiper[mod]) return;
swiper[mod].destroy();
if (mod === 'navigation') {
if (swiper.isElement) {
swiper[mod].prevEl.remove();
swiper[mod].nextEl.remove();
}
currentParams[mod].prevEl = undefined;
currentParams[mod].nextEl = undefined;
swiper[mod].prevEl = undefined;
swiper[mod].nextEl = undefined;
} else {
if (swiper.isElement) {
swiper[mod].el.remove();
}
currentParams[mod].el = undefined;
swiper[mod].el = undefined;
}
};
if (changedParams.includes('loop') && swiper.isElement) {
if (currentParams.loop && !passedParams.loop) {
loopNeedDestroy = true;
} else if (!currentParams.loop && passedParams.loop) {
loopNeedEnable = true;
} else {
loopNeedReloop = true;
}
}
updateParams.forEach(key => {
if (isObject(currentParams[key]) && isObject(passedParams[key])) {
extend(currentParams[key], passedParams[key]);
} else {
const newValue = passedParams[key];
if ((newValue === true || newValue === false) && (key === 'navigation' || key === 'pagination' || key === 'scrollbar')) {
if (newValue === false) {
destroyModule(key);
}
} else {
currentParams[key] = passedParams[key];
}
}
});
if (updateParams.includes('controller') && !needControllerInit && swiper.controller && swiper.controller.control && currentParams.controller && currentParams.controller.control) {
swiper.controller.control = currentParams.controller.control;
}
if (changedParams.includes('children') && slides && virtual && currentParams.virtual.enabled) {
virtual.slides = slides;
virtual.update(true);
}
if (changedParams.includes('children') && slides && currentParams.loop) {
loopNeedReloop = true;
}
if (needThumbsInit) {
const initialized = thumbs.init();
if (initialized) thumbs.update(true);
}
if (needControllerInit) {
swiper.controller.control = currentParams.controller.control;
}
if (needPaginationInit) {
if (swiper.isElement && (!paginationEl || typeof paginationEl === 'string')) {
paginationEl = document.createElement('div');
paginationEl.classList.add('swiper-pagination');
swiper.el.shadowEl.appendChild(paginationEl);
}
if (paginationEl) currentParams.pagination.el = paginationEl;
pagination.init();
pagination.render();
pagination.update();
}
if (needScrollbarInit) {
if (swiper.isElement && (!scrollbarEl || typeof scrollbarEl === 'string')) {
scrollbarEl = document.createElement('div');
scrollbarEl.classList.add('swiper-scrollbar');
swiper.el.shadowEl.appendChild(scrollbarEl);
}
if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
scrollbar.init();
scrollbar.updateSize();
scrollbar.setTranslate();
}
if (needNavigationInit) {
if (swiper.isElement) {
if (!nextEl || typeof nextEl === 'string') {
nextEl = document.createElement('div');
nextEl.classList.add('swiper-button-next');
swiper.el.shadowEl.appendChild(nextEl);
}
if (!prevEl || typeof prevEl === 'string') {
prevEl = document.createElement('div');
prevEl.classList.add('swiper-button-prev');
swiper.el.shadowEl.appendChild(prevEl);
}
}
if (nextEl) currentParams.navigation.nextEl = nextEl;
if (prevEl) currentParams.navigation.prevEl = prevEl;
navigation.init();
navigation.update();
}
if (changedParams.includes('allowSlideNext')) {
swiper.allowSlideNext = passedParams.allowSlideNext;
}
if (changedParams.includes('allowSlidePrev')) {
swiper.allowSlidePrev = passedParams.allowSlidePrev;
}
if (changedParams.includes('direction')) {
swiper.changeDirection(passedParams.direction, false);
}
if (loopNeedDestroy || loopNeedReloop) {
swiper.loopDestroy();
}
if (loopNeedEnable || loopNeedReloop) {
swiper.loopCreate();
}
swiper.update();
}
export { updateSwiper };
+39
View File
@@ -0,0 +1,39 @@
function isObject(o) {
return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) === 'Object';
}
function extend(target, src) {
const noExtend = ['__proto__', 'constructor', 'prototype'];
Object.keys(src).filter(key => noExtend.indexOf(key) < 0).forEach(key => {
if (typeof target[key] === 'undefined') target[key] = src[key];else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
if (src[key].__swiper__) target[key] = src[key];else extend(target[key], src[key]);
} else {
target[key] = src[key];
}
});
}
function needsNavigation(params = {}) {
return params.navigation && typeof params.navigation.nextEl === 'undefined' && typeof params.navigation.prevEl === 'undefined';
}
function needsPagination(params = {}) {
return params.pagination && typeof params.pagination.el === 'undefined';
}
function needsScrollbar(params = {}) {
return params.scrollbar && typeof params.scrollbar.el === 'undefined';
}
function uniqueClasses(classNames = '') {
const classes = classNames.split(' ').map(c => c.trim()).filter(c => !!c);
const unique = [];
classes.forEach(c => {
if (unique.indexOf(c) < 0) unique.push(c);
});
return unique.join(' ');
}
function attrToProp(attrName = '') {
return attrName.replace(/-[a-z]/g, l => l.toUpperCase().replace('-', ''));
}
function wrapperClass(className = '') {
if (!className) return 'swiper-wrapper';
if (!className.includes('swiper-wrapper')) return `swiper-wrapper ${className}`;
return className;
}
export { isObject, extend, needsNavigation, needsPagination, needsScrollbar, uniqueClasses, attrToProp, wrapperClass };
+36
View File
@@ -0,0 +1,36 @@
import { getWindow } from 'ssr-window';
export default function getBreakpoint(breakpoints, base = 'window', containerEl) {
if (!breakpoints || base === 'container' && !containerEl) return undefined;
let breakpoint = false;
const window = getWindow();
const currentHeight = base === 'window' ? window.innerHeight : containerEl.clientHeight;
const points = Object.keys(breakpoints).map(point => {
if (typeof point === 'string' && point.indexOf('@') === 0) {
const minRatio = parseFloat(point.substr(1));
const value = currentHeight * minRatio;
return {
value,
point
};
}
return {
value: point,
point
};
});
points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
for (let i = 0; i < points.length; i += 1) {
const {
point,
value
} = points[i];
if (base === 'window') {
if (window.matchMedia(`(min-width: ${value}px)`).matches) {
breakpoint = point;
}
} else if (value <= containerEl.clientWidth) {
breakpoint = point;
}
}
return breakpoint || 'max';
}
+6
View File
@@ -0,0 +1,6 @@
import setBreakpoint from './setBreakpoint.js';
import getBreakpoint from './getBreakpoint.js';
export default {
setBreakpoint,
getBreakpoint
};
+71
View File
@@ -0,0 +1,71 @@
import { extend } from '../../shared/utils.js';
const isGridEnabled = (swiper, params) => {
return swiper.grid && params.grid && params.grid.rows > 1;
};
export default function setBreakpoint() {
const swiper = this;
const {
realIndex,
initialized,
params,
el
} = swiper;
const breakpoints = params.breakpoints;
if (!breakpoints || breakpoints && Object.keys(breakpoints).length === 0) return;
// Get breakpoint for window width and update parameters
const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
const breakpointParams = breakpointOnlyParams || swiper.originalParams;
const wasMultiRow = isGridEnabled(swiper, params);
const isMultiRow = isGridEnabled(swiper, breakpointParams);
const wasEnabled = params.enabled;
if (wasMultiRow && !isMultiRow) {
el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
swiper.emitContainerClasses();
} else if (!wasMultiRow && isMultiRow) {
el.classList.add(`${params.containerModifierClass}grid`);
if (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column' || !breakpointParams.grid.fill && params.grid.fill === 'column') {
el.classList.add(`${params.containerModifierClass}grid-column`);
}
swiper.emitContainerClasses();
}
// Toggle navigation, pagination, scrollbar
['navigation', 'pagination', 'scrollbar'].forEach(prop => {
const wasModuleEnabled = params[prop] && params[prop].enabled;
const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
if (wasModuleEnabled && !isModuleEnabled) {
swiper[prop].disable();
}
if (!wasModuleEnabled && isModuleEnabled) {
swiper[prop].enable();
}
});
const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
if (directionChanged && initialized) {
swiper.changeDirection();
}
extend(swiper.params, breakpointParams);
const isEnabled = swiper.params.enabled;
Object.assign(swiper, {
allowTouchMove: swiper.params.allowTouchMove,
allowSlideNext: swiper.params.allowSlideNext,
allowSlidePrev: swiper.params.allowSlidePrev
});
if (wasEnabled && !isEnabled) {
swiper.disable();
} else if (!wasEnabled && isEnabled) {
swiper.enable();
}
swiper.currentBreakpoint = breakpoint;
swiper.emit('_beforeBreakpoint', breakpointParams);
if (needsReLoop && initialized) {
swiper.loopDestroy();
swiper.loopCreate(realIndex);
swiper.updateSlides();
}
swiper.emit('breakpoint', breakpointParams);
}
+32
View File
@@ -0,0 +1,32 @@
function checkOverflow() {
const swiper = this;
const {
isLocked: wasLocked,
params
} = swiper;
const {
slidesOffsetBefore
} = params;
if (slidesOffsetBefore) {
const lastSlideIndex = swiper.slides.length - 1;
const lastSlideRightEdge = swiper.slidesGrid[lastSlideIndex] + swiper.slidesSizesGrid[lastSlideIndex] + slidesOffsetBefore * 2;
swiper.isLocked = swiper.size > lastSlideRightEdge;
} else {
swiper.isLocked = swiper.snapGrid.length === 1;
}
if (params.allowSlideNext === true) {
swiper.allowSlideNext = !swiper.isLocked;
}
if (params.allowSlidePrev === true) {
swiper.allowSlidePrev = !swiper.isLocked;
}
if (wasLocked && wasLocked !== swiper.isLocked) {
swiper.isEnd = false;
}
if (wasLocked !== swiper.isLocked) {
swiper.emit(swiper.isLocked ? 'lock' : 'unlock');
}
}
export default {
checkOverflow
};
+50
View File
@@ -0,0 +1,50 @@
function prepareClasses(entries, prefix) {
const resultClasses = [];
entries.forEach(item => {
if (typeof item === 'object') {
Object.keys(item).forEach(classNames => {
if (item[classNames]) {
resultClasses.push(prefix + classNames);
}
});
} else if (typeof item === 'string') {
resultClasses.push(prefix + item);
}
});
return resultClasses;
}
export default function addClasses() {
const swiper = this;
const {
classNames,
params,
rtl,
el,
device
} = swiper;
// prettier-ignore
const suffixes = prepareClasses(['initialized', params.direction, {
'free-mode': swiper.params.freeMode && params.freeMode.enabled
}, {
'autoheight': params.autoHeight
}, {
'rtl': rtl
}, {
'grid': params.grid && params.grid.rows > 1
}, {
'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column'
}, {
'android': device.android
}, {
'ios': device.ios
}, {
'css-mode': params.cssMode
}, {
'centered': params.cssMode && params.centeredSlides
}, {
'watch-progress': params.watchSlidesProgress
}], params.containerModifierClass);
classNames.push(...suffixes);
el.classList.add(...classNames);
swiper.emitContainerClasses();
}
+6
View File
@@ -0,0 +1,6 @@
import addClasses from './addClasses.js';
import removeClasses from './removeClasses.js';
export default {
addClasses,
removeClasses
};
+9
View File
@@ -0,0 +1,9 @@
export default function removeClasses() {
const swiper = this;
const {
el,
classNames
} = swiper;
el.classList.remove(...classNames);
swiper.emitContainerClasses();
}
+590
View File
@@ -0,0 +1,590 @@
/* eslint no-param-reassign: "off" */
import { getDocument } from 'ssr-window';
import { extend, now, deleteProps, createElement, elementChildren, elementStyle, elementIndex } from '../shared/utils.js';
import { getSupport } from '../shared/get-support.js';
import { getDevice } from '../shared/get-device.js';
import { getBrowser } from '../shared/get-browser.js';
import Resize from './modules/resize/resize.js';
import Observer from './modules/observer/observer.js';
import eventsEmitter from './events-emitter.js';
import update from './update/index.js';
import translate from './translate/index.js';
import transition from './transition/index.js';
import slide from './slide/index.js';
import loop from './loop/index.js';
import grabCursor from './grab-cursor/index.js';
import events from './events/index.js';
import breakpoints from './breakpoints/index.js';
import classes from './classes/index.js';
import checkOverflow from './check-overflow/index.js';
import defaults from './defaults.js';
import moduleExtendParams from './moduleExtendParams.js';
import { processLazyPreloader } from '../shared/process-lazy-preloader.js';
const prototypes = {
eventsEmitter,
update,
translate,
transition,
slide,
loop,
grabCursor,
events,
breakpoints,
checkOverflow,
classes
};
const extendedDefaults = {};
class Swiper {
constructor(...args) {
let el;
let params;
if (args.length === 1 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -1) === 'Object') {
params = args[0];
} else {
[el, params] = args;
}
if (!params) params = {};
params = extend({}, params);
if (el && !params.el) params.el = el;
const document = getDocument();
if (params.el && typeof params.el === 'string' && document.querySelectorAll(params.el).length > 1) {
const swipers = [];
document.querySelectorAll(params.el).forEach(containerEl => {
const newParams = extend({}, params, {
el: containerEl
});
swipers.push(new Swiper(newParams));
});
// eslint-disable-next-line no-constructor-return
return swipers;
}
// Swiper Instance
const swiper = this;
swiper.__swiper__ = true;
swiper.support = getSupport();
swiper.device = getDevice({
userAgent: params.userAgent
});
swiper.browser = getBrowser();
swiper.eventsListeners = {};
swiper.eventsAnyListeners = [];
swiper.modules = [...swiper.__modules__];
if (params.modules && Array.isArray(params.modules)) {
swiper.modules.push(...params.modules);
}
const allModulesParams = {};
swiper.modules.forEach(mod => {
mod({
params,
swiper,
extendParams: moduleExtendParams(params, allModulesParams),
on: swiper.on.bind(swiper),
once: swiper.once.bind(swiper),
off: swiper.off.bind(swiper),
emit: swiper.emit.bind(swiper)
});
});
// Extend defaults with modules params
const swiperParams = extend({}, defaults, allModulesParams);
// Extend defaults with passed params
swiper.params = extend({}, swiperParams, extendedDefaults, params);
swiper.originalParams = extend({}, swiper.params);
swiper.passedParams = extend({}, params);
// add event listeners
if (swiper.params && swiper.params.on) {
Object.keys(swiper.params.on).forEach(eventName => {
swiper.on(eventName, swiper.params.on[eventName]);
});
}
if (swiper.params && swiper.params.onAny) {
swiper.onAny(swiper.params.onAny);
}
// Extend Swiper
Object.assign(swiper, {
enabled: swiper.params.enabled,
el,
// Classes
classNames: [],
// Slides
slides: [],
slidesGrid: [],
snapGrid: [],
slidesSizesGrid: [],
// isDirection
isHorizontal() {
return swiper.params.direction === 'horizontal';
},
isVertical() {
return swiper.params.direction === 'vertical';
},
// Indexes
activeIndex: 0,
realIndex: 0,
//
isBeginning: true,
isEnd: false,
// Props
translate: 0,
previousTranslate: 0,
progress: 0,
velocity: 0,
animating: false,
// Locks
allowSlideNext: swiper.params.allowSlideNext,
allowSlidePrev: swiper.params.allowSlidePrev,
// Touch Events
touchEventsData: {
isTouched: undefined,
isMoved: undefined,
allowTouchCallbacks: undefined,
touchStartTime: undefined,
isScrolling: undefined,
currentTranslate: undefined,
startTranslate: undefined,
allowThresholdMove: undefined,
// Form elements to match
focusableElements: swiper.params.focusableElements,
// Last click time
lastClickTime: now(),
clickTimeout: undefined,
// Velocities
velocities: [],
allowMomentumBounce: undefined,
startMoving: undefined,
evCache: []
},
// Clicks
allowClick: true,
// Touches
allowTouchMove: swiper.params.allowTouchMove,
touches: {
startX: 0,
startY: 0,
currentX: 0,
currentY: 0,
diff: 0
},
// Images
imagesToLoad: [],
imagesLoaded: 0
});
swiper.emit('_swiper');
// Init
if (swiper.params.init) {
swiper.init();
}
// Return app instance
// eslint-disable-next-line no-constructor-return
return swiper;
}
getSlideIndex(slideEl) {
const {
slidesEl,
params
} = this;
const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);
const firstSlideIndex = elementIndex(slides[0]);
return elementIndex(slideEl) - firstSlideIndex;
}
getSlideIndexByData(index) {
return this.getSlideIndex(this.slides.filter(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === index)[0]);
}
recalcSlides() {
const swiper = this;
const {
slidesEl,
params
} = swiper;
swiper.slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);
}
enable() {
const swiper = this;
if (swiper.enabled) return;
swiper.enabled = true;
if (swiper.params.grabCursor) {
swiper.setGrabCursor();
}
swiper.emit('enable');
}
disable() {
const swiper = this;
if (!swiper.enabled) return;
swiper.enabled = false;
if (swiper.params.grabCursor) {
swiper.unsetGrabCursor();
}
swiper.emit('disable');
}
setProgress(progress, speed) {
const swiper = this;
progress = Math.min(Math.max(progress, 0), 1);
const min = swiper.minTranslate();
const max = swiper.maxTranslate();
const current = (max - min) * progress + min;
swiper.translateTo(current, typeof speed === 'undefined' ? 0 : speed);
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
emitContainerClasses() {
const swiper = this;
if (!swiper.params._emitClasses || !swiper.el) return;
const cls = swiper.el.className.split(' ').filter(className => {
return className.indexOf('swiper') === 0 || className.indexOf(swiper.params.containerModifierClass) === 0;
});
swiper.emit('_containerClasses', cls.join(' '));
}
getSlideClasses(slideEl) {
const swiper = this;
if (swiper.destroyed) return '';
return slideEl.className.split(' ').filter(className => {
return className.indexOf('swiper-slide') === 0 || className.indexOf(swiper.params.slideClass) === 0;
}).join(' ');
}
emitSlidesClasses() {
const swiper = this;
if (!swiper.params._emitClasses || !swiper.el) return;
const updates = [];
swiper.slides.forEach(slideEl => {
const classNames = swiper.getSlideClasses(slideEl);
updates.push({
slideEl,
classNames
});
swiper.emit('_slideClass', slideEl, classNames);
});
swiper.emit('_slideClasses', updates);
}
slidesPerViewDynamic(view = 'current', exact = false) {
const swiper = this;
const {
params,
slides,
slidesGrid,
slidesSizesGrid,
size: swiperSize,
activeIndex
} = swiper;
let spv = 1;
if (params.centeredSlides) {
let slideSize = slides[activeIndex].swiperSlideSize;
let breakLoop;
for (let i = activeIndex + 1; i < slides.length; i += 1) {
if (slides[i] && !breakLoop) {
slideSize += slides[i].swiperSlideSize;
spv += 1;
if (slideSize > swiperSize) breakLoop = true;
}
}
for (let i = activeIndex - 1; i >= 0; i -= 1) {
if (slides[i] && !breakLoop) {
slideSize += slides[i].swiperSlideSize;
spv += 1;
if (slideSize > swiperSize) breakLoop = true;
}
}
} else {
// eslint-disable-next-line
if (view === 'current') {
for (let i = activeIndex + 1; i < slides.length; i += 1) {
const slideInView = exact ? slidesGrid[i] + slidesSizesGrid[i] - slidesGrid[activeIndex] < swiperSize : slidesGrid[i] - slidesGrid[activeIndex] < swiperSize;
if (slideInView) {
spv += 1;
}
}
} else {
// previous
for (let i = activeIndex - 1; i >= 0; i -= 1) {
const slideInView = slidesGrid[activeIndex] - slidesGrid[i] < swiperSize;
if (slideInView) {
spv += 1;
}
}
}
}
return spv;
}
update() {
const swiper = this;
if (!swiper || swiper.destroyed) return;
const {
snapGrid,
params
} = swiper;
// Breakpoints
if (params.breakpoints) {
swiper.setBreakpoint();
}
[...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => {
if (imageEl.complete) {
processLazyPreloader(swiper, imageEl);
}
});
swiper.updateSize();
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
function setTranslate() {
const translateValue = swiper.rtlTranslate ? swiper.translate * -1 : swiper.translate;
const newTranslate = Math.min(Math.max(translateValue, swiper.maxTranslate()), swiper.minTranslate());
swiper.setTranslate(newTranslate);
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
let translated;
if (swiper.params.freeMode && swiper.params.freeMode.enabled) {
setTranslate();
if (swiper.params.autoHeight) {
swiper.updateAutoHeight();
}
} else {
if ((swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) {
translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true);
} else {
translated = swiper.slideTo(swiper.activeIndex, 0, false, true);
}
if (!translated) {
setTranslate();
}
}
if (params.watchOverflow && snapGrid !== swiper.snapGrid) {
swiper.checkOverflow();
}
swiper.emit('update');
}
changeDirection(newDirection, needUpdate = true) {
const swiper = this;
const currentDirection = swiper.params.direction;
if (!newDirection) {
// eslint-disable-next-line
newDirection = currentDirection === 'horizontal' ? 'vertical' : 'horizontal';
}
if (newDirection === currentDirection || newDirection !== 'horizontal' && newDirection !== 'vertical') {
return swiper;
}
swiper.el.classList.remove(`${swiper.params.containerModifierClass}${currentDirection}`);
swiper.el.classList.add(`${swiper.params.containerModifierClass}${newDirection}`);
swiper.emitContainerClasses();
swiper.params.direction = newDirection;
swiper.slides.forEach(slideEl => {
if (newDirection === 'vertical') {
slideEl.style.width = '';
} else {
slideEl.style.height = '';
}
});
swiper.emit('changeDirection');
if (needUpdate) swiper.update();
return swiper;
}
changeLanguageDirection(direction) {
const swiper = this;
if (swiper.rtl && direction === 'rtl' || !swiper.rtl && direction === 'ltr') return;
swiper.rtl = direction === 'rtl';
swiper.rtlTranslate = swiper.params.direction === 'horizontal' && swiper.rtl;
if (swiper.rtl) {
swiper.el.classList.add(`${swiper.params.containerModifierClass}rtl`);
swiper.el.dir = 'rtl';
} else {
swiper.el.classList.remove(`${swiper.params.containerModifierClass}rtl`);
swiper.el.dir = 'ltr';
}
swiper.update();
}
mount(element) {
const swiper = this;
if (swiper.mounted) return true;
// Find el
let el = element || swiper.params.el;
if (typeof el === 'string') {
el = document.querySelector(el);
}
if (!el) {
return false;
}
el.swiper = swiper;
if (el.shadowEl) {
swiper.isElement = true;
}
const getWrapperSelector = () => {
return `.${(swiper.params.wrapperClass || '').trim().split(' ').join('.')}`;
};
const getWrapper = () => {
if (el && el.shadowRoot && el.shadowRoot.querySelector) {
const res = el.shadowRoot.querySelector(getWrapperSelector());
// Children needs to return slot items
return res;
}
return elementChildren(el, getWrapperSelector())[0];
};
// Find Wrapper
let wrapperEl = getWrapper();
if (!wrapperEl && swiper.params.createElements) {
wrapperEl = createElement('div', swiper.params.wrapperClass);
el.append(wrapperEl);
elementChildren(el, `.${swiper.params.slideClass}`).forEach(slideEl => {
wrapperEl.append(slideEl);
});
}
Object.assign(swiper, {
el,
wrapperEl,
slidesEl: swiper.isElement ? el : wrapperEl,
mounted: true,
// RTL
rtl: el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl',
rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl'),
wrongRTL: elementStyle(wrapperEl, 'display') === '-webkit-box'
});
return true;
}
init(el) {
const swiper = this;
if (swiper.initialized) return swiper;
const mounted = swiper.mount(el);
if (mounted === false) return swiper;
swiper.emit('beforeInit');
// Set breakpoint
if (swiper.params.breakpoints) {
swiper.setBreakpoint();
}
// Add Classes
swiper.addClasses();
// Update size
swiper.updateSize();
// Update slides
swiper.updateSlides();
if (swiper.params.watchOverflow) {
swiper.checkOverflow();
}
// Set Grab Cursor
if (swiper.params.grabCursor && swiper.enabled) {
swiper.setGrabCursor();
}
// Slide To Initial Slide
if (swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {
swiper.slideTo(swiper.params.initialSlide + swiper.virtual.slidesBefore, 0, swiper.params.runCallbacksOnInit, false, true);
} else {
swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
}
// Create loop
if (swiper.params.loop) {
swiper.loopCreate();
}
// Attach events
swiper.attachEvents();
[...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => {
if (imageEl.complete) {
processLazyPreloader(swiper, imageEl);
} else {
imageEl.addEventListener('load', e => {
processLazyPreloader(swiper, e.target);
});
}
});
// Init Flag
swiper.initialized = true;
// Emit
swiper.emit('init');
swiper.emit('afterInit');
return swiper;
}
destroy(deleteInstance = true, cleanStyles = true) {
const swiper = this;
const {
params,
el,
wrapperEl,
slides
} = swiper;
if (typeof swiper.params === 'undefined' || swiper.destroyed) {
return null;
}
swiper.emit('beforeDestroy');
// Init Flag
swiper.initialized = false;
// Detach events
swiper.detachEvents();
// Destroy loop
if (params.loop) {
swiper.loopDestroy();
}
// Cleanup styles
if (cleanStyles) {
swiper.removeClasses();
el.removeAttribute('style');
wrapperEl.removeAttribute('style');
if (slides && slides.length) {
slides.forEach(slideEl => {
slideEl.classList.remove(params.slideVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
slideEl.removeAttribute('style');
slideEl.removeAttribute('data-swiper-slide-index');
});
}
}
swiper.emit('destroy');
// Detach emitter events
Object.keys(swiper.eventsListeners).forEach(eventName => {
swiper.off(eventName);
});
if (deleteInstance !== false) {
swiper.el.swiper = null;
deleteProps(swiper);
}
swiper.destroyed = true;
return null;
}
static extendDefaults(newDefaults) {
extend(extendedDefaults, newDefaults);
}
static get extendedDefaults() {
return extendedDefaults;
}
static get defaults() {
return defaults;
}
static installModule(mod) {
if (!Swiper.prototype.__modules__) Swiper.prototype.__modules__ = [];
const modules = Swiper.prototype.__modules__;
if (typeof mod === 'function' && modules.indexOf(mod) < 0) {
modules.push(mod);
}
}
static use(module) {
if (Array.isArray(module)) {
module.forEach(m => Swiper.installModule(m));
return Swiper;
}
Swiper.installModule(module);
return Swiper;
}
}
Object.keys(prototypes).forEach(prototypeGroup => {
Object.keys(prototypes[prototypeGroup]).forEach(protoMethod => {
Swiper.prototype[protoMethod] = prototypes[prototypeGroup][protoMethod];
});
});
Swiper.use([Resize, Observer]);
export default Swiper;
+116
View File
@@ -0,0 +1,116 @@
export default {
init: true,
direction: 'horizontal',
oneWayMovement: false,
touchEventsTarget: 'wrapper',
initialSlide: 0,
speed: 300,
cssMode: false,
updateOnWindowResize: true,
resizeObserver: true,
nested: false,
createElements: false,
enabled: true,
focusableElements: 'input, select, option, textarea, button, video, label',
// Overrides
width: null,
height: null,
//
preventInteractionOnTransition: false,
// ssr
userAgent: null,
url: null,
// To support iOS's swipe-to-go-back gesture (when being used in-app).
edgeSwipeDetection: false,
edgeSwipeThreshold: 20,
// Autoheight
autoHeight: false,
// Set wrapper width
setWrapperSize: false,
// Virtual Translate
virtualTranslate: false,
// Effects
effect: 'slide',
// 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
// Breakpoints
breakpoints: undefined,
breakpointsBase: 'window',
// Slides grid
spaceBetween: 0,
slidesPerView: 1,
slidesPerGroup: 1,
slidesPerGroupSkip: 0,
slidesPerGroupAuto: false,
centeredSlides: false,
centeredSlidesBounds: false,
slidesOffsetBefore: 0,
// in px
slidesOffsetAfter: 0,
// in px
normalizeSlideIndex: true,
centerInsufficientSlides: false,
// Disable swiper and hide navigation when container not overflow
watchOverflow: true,
// Round length
roundLengths: false,
// Touches
touchRatio: 1,
touchAngle: 45,
simulateTouch: true,
shortSwipes: true,
longSwipes: true,
longSwipesRatio: 0.5,
longSwipesMs: 300,
followFinger: true,
allowTouchMove: true,
threshold: 5,
touchMoveStopPropagation: false,
touchStartPreventDefault: true,
touchStartForcePreventDefault: false,
touchReleaseOnEdges: false,
// Unique Navigation Elements
uniqueNavElements: true,
// Resistance
resistance: true,
resistanceRatio: 0.85,
// Progress
watchSlidesProgress: false,
// Cursor
grabCursor: false,
// Clicks
preventClicks: true,
preventClicksPropagation: true,
slideToClickedSlide: false,
// loop
loop: false,
loopedSlides: null,
loopPreventsSliding: true,
// rewind
rewind: false,
// Swiping/no swiping
allowSlidePrev: true,
allowSlideNext: true,
swipeHandler: null,
// '.swipe-handler',
noSwiping: true,
noSwipingClass: 'swiper-no-swiping',
noSwipingSelector: null,
// Passive Listeners
passiveListeners: true,
maxBackfaceHiddenSlides: 10,
// NS
containerModifierClass: 'swiper-',
// NEW
slideClass: 'swiper-slide',
slideActiveClass: 'swiper-slide-active',
slideVisibleClass: 'swiper-slide-visible',
slideNextClass: 'swiper-slide-next',
slidePrevClass: 'swiper-slide-prev',
wrapperClass: 'swiper-wrapper',
lazyPreloaderClass: 'swiper-lazy-preloader',
// Callbacks
runCallbacksOnInit: true,
// Internals
_emitClasses: false
};
+98
View File
@@ -0,0 +1,98 @@
/* eslint-disable no-underscore-dangle */
export default {
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(...args) {
self.off(events, onceHandler);
if (onceHandler.__emitterProxy) {
delete onceHandler.__emitterProxy;
}
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(...args) {
const self = this;
if (!self.eventsListeners || self.destroyed) return self;
if (!self.eventsListeners) return self;
let events;
let data;
let context;
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;
}
};
+91
View File
@@ -0,0 +1,91 @@
import { getDocument } from 'ssr-window';
import onTouchStart from './onTouchStart.js';
import onTouchMove from './onTouchMove.js';
import onTouchEnd from './onTouchEnd.js';
import onResize from './onResize.js';
import onClick from './onClick.js';
import onScroll from './onScroll.js';
import onLoad from './onLoad.js';
let dummyEventAttached = false;
function dummyEventListener() {}
const events = (swiper, method) => {
const document = getDocument();
const {
params,
el,
wrapperEl,
device
} = swiper;
const capture = !!params.nested;
const domMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
const swiperMethod = method;
// Touch Events
el[domMethod]('pointerdown', swiper.onTouchStart, {
passive: false
});
document[domMethod]('pointermove', swiper.onTouchMove, {
passive: false,
capture
});
document[domMethod]('pointerup', swiper.onTouchEnd, {
passive: true
});
document[domMethod]('pointercancel', swiper.onTouchEnd, {
passive: true
});
document[domMethod]('pointerout', swiper.onTouchEnd, {
passive: true
});
document[domMethod]('pointerleave', swiper.onTouchEnd, {
passive: true
});
// Prevent Links Clicks
if (params.preventClicks || params.preventClicksPropagation) {
el[domMethod]('click', swiper.onClick, true);
}
if (params.cssMode) {
wrapperEl[domMethod]('scroll', swiper.onScroll);
}
// Resize handler
if (params.updateOnWindowResize) {
swiper[swiperMethod](device.ios || device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate', onResize, true);
} else {
swiper[swiperMethod]('observerUpdate', onResize, true);
}
// Images loader
el[domMethod]('load', swiper.onLoad, {
capture: true
});
};
function attachEvents() {
const swiper = this;
const document = getDocument();
const {
params
} = swiper;
swiper.onTouchStart = onTouchStart.bind(swiper);
swiper.onTouchMove = onTouchMove.bind(swiper);
swiper.onTouchEnd = onTouchEnd.bind(swiper);
if (params.cssMode) {
swiper.onScroll = onScroll.bind(swiper);
}
swiper.onClick = onClick.bind(swiper);
swiper.onLoad = onLoad.bind(swiper);
if (!dummyEventAttached) {
document.addEventListener('touchstart', dummyEventListener);
dummyEventAttached = true;
}
events(swiper, 'on');
}
function detachEvents() {
const swiper = this;
events(swiper, 'off');
}
export default {
attachEvents,
detachEvents
};
+11
View File
@@ -0,0 +1,11 @@
export default function onClick(e) {
const swiper = this;
if (!swiper.enabled) return;
if (!swiper.allowClick) {
if (swiper.params.preventClicks) e.preventDefault();
if (swiper.params.preventClicksPropagation && swiper.animating) {
e.stopPropagation();
e.stopImmediatePropagation();
}
}
}
+6
View File
@@ -0,0 +1,6 @@
import { processLazyPreloader } from '../../shared/process-lazy-preloader.js';
export default function onLoad(e) {
const swiper = this;
processLazyPreloader(swiper, e.target);
swiper.update();
}
+53
View File
@@ -0,0 +1,53 @@
let timeout;
export default function onResize() {
const swiper = this;
const {
params,
el
} = swiper;
if (el && el.offsetWidth === 0) return;
// Breakpoints
if (params.breakpoints) {
swiper.setBreakpoint();
}
// Save locks
const {
allowSlideNext,
allowSlidePrev,
snapGrid
} = swiper;
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
// Disable locks on resize
swiper.allowSlideNext = true;
swiper.allowSlidePrev = true;
swiper.updateSize();
swiper.updateSlides();
swiper.updateSlidesClasses();
const isVirtualLoop = isVirtual && params.loop;
if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.isBeginning && !swiper.params.centeredSlides && !isVirtualLoop) {
swiper.slideTo(swiper.slides.length - 1, 0, false, true);
} else {
if (swiper.params.loop && !isVirtual) {
swiper.slideToLoop(swiper.realIndex, 0, false, true);
} else {
swiper.slideTo(swiper.activeIndex, 0, false, true);
}
}
if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
clearTimeout(timeout);
timeout = setTimeout(() => {
if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
swiper.autoplay.resume();
}
}, 500);
}
// Return locks after resize
swiper.allowSlidePrev = allowSlidePrev;
swiper.allowSlideNext = allowSlideNext;
if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) {
swiper.checkOverflow();
}
}
+30
View File
@@ -0,0 +1,30 @@
export default function onScroll() {
const swiper = this;
const {
wrapperEl,
rtlTranslate,
enabled
} = swiper;
if (!enabled) return;
swiper.previousTranslate = swiper.translate;
if (swiper.isHorizontal()) {
swiper.translate = -wrapperEl.scrollLeft;
} else {
swiper.translate = -wrapperEl.scrollTop;
}
// eslint-disable-next-line
if (swiper.translate === 0) swiper.translate = 0;
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
let newProgress;
const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
if (translatesDiff === 0) {
newProgress = 0;
} else {
newProgress = (swiper.translate - swiper.minTranslate()) / translatesDiff;
}
if (newProgress !== swiper.progress) {
swiper.updateProgress(rtlTranslate ? -swiper.translate : swiper.translate);
}
swiper.emit('setTranslate', swiper.translate, false);
}
+150
View File
@@ -0,0 +1,150 @@
import { now, nextTick } from '../../shared/utils.js';
export default function onTouchEnd(event) {
const swiper = this;
const data = swiper.touchEventsData;
const pointerIndex = data.evCache.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
if (pointerIndex >= 0) {
data.evCache.splice(pointerIndex, 1);
}
if (['pointercancel', 'pointerout', 'pointerleave'].includes(event.type)) {
const proceed = event.type === 'pointercancel' && (swiper.browser.isSafari || swiper.browser.isWebView);
if (!proceed) {
return;
}
}
const {
params,
touches,
rtlTranslate: rtl,
slidesGrid,
enabled
} = swiper;
if (!enabled) return;
if (!params.simulateTouch && event.pointerType === 'mouse') return;
let e = event;
if (e.originalEvent) e = e.originalEvent;
if (data.allowTouchCallbacks) {
swiper.emit('touchEnd', e);
}
data.allowTouchCallbacks = false;
if (!data.isTouched) {
if (data.isMoved && params.grabCursor) {
swiper.setGrabCursor(false);
}
data.isMoved = false;
data.startMoving = false;
return;
}
// Return Grab Cursor
if (params.grabCursor && data.isMoved && data.isTouched && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
swiper.setGrabCursor(false);
}
// Time diff
const touchEndTime = now();
const timeDiff = touchEndTime - data.touchStartTime;
// Tap, doubleTap, Click
if (swiper.allowClick) {
const pathTree = e.path || e.composedPath && e.composedPath();
swiper.updateClickedSlide(pathTree && pathTree[0] || e.target);
swiper.emit('tap click', e);
if (timeDiff < 300 && touchEndTime - data.lastClickTime < 300) {
swiper.emit('doubleTap doubleClick', e);
}
}
data.lastClickTime = now();
nextTick(() => {
if (!swiper.destroyed) swiper.allowClick = true;
});
if (!data.isTouched || !data.isMoved || !swiper.swipeDirection || touches.diff === 0 || data.currentTranslate === data.startTranslate) {
data.isTouched = false;
data.isMoved = false;
data.startMoving = false;
return;
}
data.isTouched = false;
data.isMoved = false;
data.startMoving = false;
let currentPos;
if (params.followFinger) {
currentPos = rtl ? swiper.translate : -swiper.translate;
} else {
currentPos = -data.currentTranslate;
}
if (params.cssMode) {
return;
}
if (swiper.params.freeMode && params.freeMode.enabled) {
swiper.freeMode.onTouchEnd({
currentPos
});
return;
}
// Find current slide
let stopIndex = 0;
let groupSize = swiper.slidesSizesGrid[0];
for (let i = 0; i < slidesGrid.length; i += i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup) {
const increment = i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
if (typeof slidesGrid[i + increment] !== 'undefined') {
if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
stopIndex = i;
groupSize = slidesGrid[i + increment] - slidesGrid[i];
}
} else if (currentPos >= slidesGrid[i]) {
stopIndex = i;
groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];
}
}
let rewindFirstIndex = null;
let rewindLastIndex = null;
if (params.rewind) {
if (swiper.isBeginning) {
rewindLastIndex = swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;
} else if (swiper.isEnd) {
rewindFirstIndex = 0;
}
}
// Find current slide size
const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
const increment = stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
if (timeDiff > params.longSwipesMs) {
// Long touches
if (!params.longSwipes) {
swiper.slideTo(swiper.activeIndex);
return;
}
if (swiper.swipeDirection === 'next') {
if (ratio >= params.longSwipesRatio) swiper.slideTo(params.rewind && swiper.isEnd ? rewindFirstIndex : stopIndex + increment);else swiper.slideTo(stopIndex);
}
if (swiper.swipeDirection === 'prev') {
if (ratio > 1 - params.longSwipesRatio) {
swiper.slideTo(stopIndex + increment);
} else if (rewindLastIndex !== null && ratio < 0 && Math.abs(ratio) > params.longSwipesRatio) {
swiper.slideTo(rewindLastIndex);
} else {
swiper.slideTo(stopIndex);
}
}
} else {
// Short swipes
if (!params.shortSwipes) {
swiper.slideTo(swiper.activeIndex);
return;
}
const isNavButtonTarget = swiper.navigation && (e.target === swiper.navigation.nextEl || e.target === swiper.navigation.prevEl);
if (!isNavButtonTarget) {
if (swiper.swipeDirection === 'next') {
swiper.slideTo(rewindFirstIndex !== null ? rewindFirstIndex : stopIndex + increment);
}
if (swiper.swipeDirection === 'prev') {
swiper.slideTo(rewindLastIndex !== null ? rewindLastIndex : stopIndex);
}
} else if (e.target === swiper.navigation.nextEl) {
swiper.slideTo(stopIndex + increment);
} else {
swiper.slideTo(stopIndex);
}
}
}
+241
View File
@@ -0,0 +1,241 @@
import { getDocument } from 'ssr-window';
import { now } from '../../shared/utils.js';
export default function onTouchMove(event) {
const document = getDocument();
const swiper = this;
const data = swiper.touchEventsData;
const {
params,
touches,
rtlTranslate: rtl,
enabled
} = swiper;
if (!enabled) return;
if (!params.simulateTouch && event.pointerType === 'mouse') return;
let e = event;
if (e.originalEvent) e = e.originalEvent;
if (!data.isTouched) {
if (data.startMoving && data.isScrolling) {
swiper.emit('touchMoveOpposite', e);
}
return;
}
const pointerIndex = data.evCache.findIndex(cachedEv => cachedEv.pointerId === e.pointerId);
if (pointerIndex >= 0) data.evCache[pointerIndex] = e;
const targetTouch = data.evCache.length > 1 ? data.evCache[0] : e;
const pageX = targetTouch.pageX;
const pageY = targetTouch.pageY;
if (e.preventedByNestedSwiper) {
touches.startX = pageX;
touches.startY = pageY;
return;
}
if (!swiper.allowTouchMove) {
if (!e.target.matches(data.focusableElements)) {
swiper.allowClick = false;
}
if (data.isTouched) {
Object.assign(touches, {
startX: pageX,
startY: pageY,
prevX: swiper.touches.currentX,
prevY: swiper.touches.currentY,
currentX: pageX,
currentY: pageY
});
data.touchStartTime = now();
}
return;
}
if (params.touchReleaseOnEdges && !params.loop) {
if (swiper.isVertical()) {
// Vertical
if (pageY < touches.startY && swiper.translate <= swiper.maxTranslate() || pageY > touches.startY && swiper.translate >= swiper.minTranslate()) {
data.isTouched = false;
data.isMoved = false;
return;
}
} else if (pageX < touches.startX && swiper.translate <= swiper.maxTranslate() || pageX > touches.startX && swiper.translate >= swiper.minTranslate()) {
return;
}
}
if (document.activeElement) {
if (e.target === document.activeElement && e.target.matches(data.focusableElements)) {
data.isMoved = true;
swiper.allowClick = false;
return;
}
}
if (data.allowTouchCallbacks) {
swiper.emit('touchMove', e);
}
if (e.targetTouches && e.targetTouches.length > 1) return;
touches.currentX = pageX;
touches.currentY = pageY;
const diffX = touches.currentX - touches.startX;
const diffY = touches.currentY - touches.startY;
if (swiper.params.threshold && Math.sqrt(diffX ** 2 + diffY ** 2) < swiper.params.threshold) return;
if (typeof data.isScrolling === 'undefined') {
let touchAngle;
if (swiper.isHorizontal() && touches.currentY === touches.startY || swiper.isVertical() && touches.currentX === touches.startX) {
data.isScrolling = false;
} else {
// eslint-disable-next-line
if (diffX * diffX + diffY * diffY >= 25) {
touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI;
data.isScrolling = swiper.isHorizontal() ? touchAngle > params.touchAngle : 90 - touchAngle > params.touchAngle;
}
}
}
if (data.isScrolling) {
swiper.emit('touchMoveOpposite', e);
}
if (typeof data.startMoving === 'undefined') {
if (touches.currentX !== touches.startX || touches.currentY !== touches.startY) {
data.startMoving = true;
}
}
if (data.isScrolling || swiper.zoom && swiper.params.zoom && swiper.params.zoom.enabled && data.evCache.length > 1) {
data.isTouched = false;
return;
}
if (!data.startMoving) {
return;
}
swiper.allowClick = false;
if (!params.cssMode && e.cancelable) {
e.preventDefault();
}
if (params.touchMoveStopPropagation && !params.nested) {
e.stopPropagation();
}
let diff = swiper.isHorizontal() ? diffX : diffY;
let touchesDiff = swiper.isHorizontal() ? touches.currentX - touches.previousX : touches.currentY - touches.previousY;
if (params.oneWayMovement) {
diff = Math.abs(diff) * (rtl ? 1 : -1);
touchesDiff = Math.abs(touchesDiff) * (rtl ? 1 : -1);
}
touches.diff = diff;
diff *= params.touchRatio;
if (rtl) {
diff = -diff;
touchesDiff = -touchesDiff;
}
const prevTouchesDirection = swiper.touchesDirection;
swiper.swipeDirection = diff > 0 ? 'prev' : 'next';
swiper.touchesDirection = touchesDiff > 0 ? 'prev' : 'next';
const isLoop = swiper.params.loop && !params.cssMode;
if (!data.isMoved) {
if (isLoop) {
swiper.loopFix({
direction: swiper.swipeDirection
});
}
data.startTranslate = swiper.getTranslate();
swiper.setTransition(0);
if (swiper.animating) {
const evt = new window.CustomEvent('transitionend', {
bubbles: true,
cancelable: true
});
swiper.wrapperEl.dispatchEvent(evt);
}
data.allowMomentumBounce = false;
// Grab Cursor
if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
swiper.setGrabCursor(true);
}
swiper.emit('sliderFirstMove', e);
}
let loopFixed;
if (data.isMoved && prevTouchesDirection !== swiper.touchesDirection && isLoop && Math.abs(diff) >= 1) {
// need another loop fix
swiper.loopFix({
direction: swiper.swipeDirection,
setTranslate: true
});
loopFixed = true;
}
swiper.emit('sliderMove', e);
data.isMoved = true;
data.currentTranslate = diff + data.startTranslate;
let disableParentSwiper = true;
let resistanceRatio = params.resistanceRatio;
if (params.touchReleaseOnEdges) {
resistanceRatio = 0;
}
if (diff > 0) {
if (isLoop && !loopFixed && data.currentTranslate > (params.centeredSlides ? swiper.minTranslate() - swiper.size / 2 : swiper.minTranslate())) {
swiper.loopFix({
direction: 'prev',
setTranslate: true,
activeSlideIndex: 0
});
}
if (data.currentTranslate > swiper.minTranslate()) {
disableParentSwiper = false;
if (params.resistance) {
data.currentTranslate = swiper.minTranslate() - 1 + (-swiper.minTranslate() + data.startTranslate + diff) ** resistanceRatio;
}
}
} else if (diff < 0) {
if (isLoop && !loopFixed && data.currentTranslate < (params.centeredSlides ? swiper.maxTranslate() + swiper.size / 2 : swiper.maxTranslate())) {
swiper.loopFix({
direction: 'next',
setTranslate: true,
activeSlideIndex: swiper.slides.length - (params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10)))
});
}
if (data.currentTranslate < swiper.maxTranslate()) {
disableParentSwiper = false;
if (params.resistance) {
data.currentTranslate = swiper.maxTranslate() + 1 - (swiper.maxTranslate() - data.startTranslate - diff) ** resistanceRatio;
}
}
}
if (disableParentSwiper) {
e.preventedByNestedSwiper = true;
}
// Directions locks
if (!swiper.allowSlideNext && swiper.swipeDirection === 'next' && data.currentTranslate < data.startTranslate) {
data.currentTranslate = data.startTranslate;
}
if (!swiper.allowSlidePrev && swiper.swipeDirection === 'prev' && data.currentTranslate > data.startTranslate) {
data.currentTranslate = data.startTranslate;
}
if (!swiper.allowSlidePrev && !swiper.allowSlideNext) {
data.currentTranslate = data.startTranslate;
}
// Threshold
if (params.threshold > 0) {
if (Math.abs(diff) > params.threshold || data.allowThresholdMove) {
if (!data.allowThresholdMove) {
data.allowThresholdMove = true;
touches.startX = touches.currentX;
touches.startY = touches.currentY;
data.currentTranslate = data.startTranslate;
touches.diff = swiper.isHorizontal() ? touches.currentX - touches.startX : touches.currentY - touches.startY;
return;
}
} else {
data.currentTranslate = data.startTranslate;
return;
}
}
if (!params.followFinger || params.cssMode) return;
// Update active index in free mode
if (params.freeMode && params.freeMode.enabled && swiper.freeMode || params.watchSlidesProgress) {
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
if (swiper.params.freeMode && params.freeMode.enabled && swiper.freeMode) {
swiper.freeMode.onTouchMove();
}
// Update progress
swiper.updateProgress(data.currentTranslate);
// Update translate
swiper.setTranslate(data.currentTranslate);
}
+112
View File
@@ -0,0 +1,112 @@
import { getWindow, getDocument } from 'ssr-window';
import { now } from '../../shared/utils.js';
// Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
function closestElement(selector, base = this) {
function __closestFrom(el) {
if (!el || el === getDocument() || el === getWindow()) return null;
if (el.assignedSlot) el = el.assignedSlot;
const found = el.closest(selector);
if (!found && !el.getRootNode) {
return null;
}
return found || __closestFrom(el.getRootNode().host);
}
return __closestFrom(base);
}
export default function onTouchStart(event) {
const swiper = this;
const document = getDocument();
const window = getWindow();
const data = swiper.touchEventsData;
data.evCache.push(event);
const {
params,
touches,
enabled
} = swiper;
if (!enabled) return;
if (!params.simulateTouch && event.pointerType === 'mouse') return;
if (swiper.animating && params.preventInteractionOnTransition) {
return;
}
if (!swiper.animating && params.cssMode && params.loop) {
swiper.loopFix();
}
let e = event;
if (e.originalEvent) e = e.originalEvent;
let targetEl = e.target;
if (params.touchEventsTarget === 'wrapper') {
if (!swiper.wrapperEl.contains(targetEl)) return;
}
if ('which' in e && e.which === 3) return;
if ('button' in e && e.button > 0) return;
if (data.isTouched && data.isMoved) return;
// change target el for shadow root component
const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== '';
// eslint-disable-next-line
const eventPath = event.composedPath ? event.composedPath() : event.path;
if (swipingClassHasValue && e.target && e.target.shadowRoot && eventPath) {
targetEl = eventPath[0];
}
const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;
const isTargetShadow = !!(e.target && e.target.shadowRoot);
// use closestElement for shadow root element to get the actual closest for nested shadow root element
if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, targetEl) : targetEl.closest(noSwipingSelector))) {
swiper.allowClick = true;
return;
}
if (params.swipeHandler) {
if (!targetEl.closest(params.swipeHandler)) return;
}
touches.currentX = e.pageX;
touches.currentY = e.pageY;
const startX = touches.currentX;
const startY = touches.currentY;
// Do NOT start if iOS edge swipe is detected. Otherwise iOS app cannot swipe-to-go-back anymore
const edgeSwipeDetection = params.edgeSwipeDetection || params.iOSEdgeSwipeDetection;
const edgeSwipeThreshold = params.edgeSwipeThreshold || params.iOSEdgeSwipeThreshold;
if (edgeSwipeDetection && (startX <= edgeSwipeThreshold || startX >= window.innerWidth - edgeSwipeThreshold)) {
if (edgeSwipeDetection === 'prevent') {
event.preventDefault();
} else {
return;
}
}
Object.assign(data, {
isTouched: true,
isMoved: false,
allowTouchCallbacks: true,
isScrolling: undefined,
startMoving: undefined
});
touches.startX = startX;
touches.startY = startY;
data.touchStartTime = now();
swiper.allowClick = true;
swiper.updateSize();
swiper.swipeDirection = undefined;
if (params.threshold > 0) data.allowThresholdMove = false;
let preventDefault = true;
if (targetEl.matches(data.focusableElements)) {
preventDefault = false;
if (targetEl.nodeName === 'SELECT') {
data.isTouched = false;
}
}
if (document.activeElement && document.activeElement.matches(data.focusableElements) && document.activeElement !== targetEl) {
document.activeElement.blur();
}
const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
if ((params.touchStartForcePreventDefault || shouldPreventDefault) && !targetEl.isContentEditable) {
e.preventDefault();
}
if (swiper.params.freeMode && swiper.params.freeMode.enabled && swiper.freeMode && swiper.animating && !params.cssMode) {
swiper.freeMode.onTouchStart();
}
swiper.emit('touchStart', e);
}
+6
View File
@@ -0,0 +1,6 @@
import setGrabCursor from './setGrabCursor.js';
import unsetGrabCursor from './unsetGrabCursor.js';
export default {
setGrabCursor,
unsetGrabCursor
};
+15
View File
@@ -0,0 +1,15 @@
export default function setGrabCursor(moving) {
const swiper = this;
if (!swiper.params.simulateTouch || swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) return;
const el = swiper.params.touchEventsTarget === 'container' ? swiper.el : swiper.wrapperEl;
if (swiper.isElement) {
swiper.__preventObserver__ = true;
}
el.style.cursor = 'move';
el.style.cursor = moving ? 'grabbing' : 'grab';
if (swiper.isElement) {
requestAnimationFrame(() => {
swiper.__preventObserver__ = false;
});
}
}
+15
View File
@@ -0,0 +1,15 @@
export default function unsetGrabCursor() {
const swiper = this;
if (swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) {
return;
}
if (swiper.isElement) {
swiper.__preventObserver__ = true;
}
swiper[swiper.params.touchEventsTarget === 'container' ? 'el' : 'wrapperEl'].style.cursor = '';
if (swiper.isElement) {
requestAnimationFrame(() => {
swiper.__preventObserver__ = false;
});
}
}
+8
View File
@@ -0,0 +1,8 @@
import loopCreate from './loopCreate.js';
import loopFix from './loopFix.js';
import loopDestroy from './loopDestroy.js';
export default {
loopCreate,
loopFix,
loopDestroy
};
+17
View File
@@ -0,0 +1,17 @@
import { elementChildren } from '../../shared/utils.js';
export default function loopCreate(slideRealIndex) {
const swiper = this;
const {
params,
slidesEl
} = swiper;
if (!params.loop || swiper.virtual && swiper.params.virtual.enabled) return;
const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`);
slides.forEach((el, index) => {
el.setAttribute('data-swiper-slide-index', index);
});
swiper.loopFix({
slideRealIndex,
direction: params.centeredSlides ? undefined : 'next'
});
}
+22
View File
@@ -0,0 +1,22 @@
export default function loopDestroy() {
const swiper = this;
const {
params,
slidesEl
} = swiper;
if (!params.loop || swiper.virtual && swiper.params.virtual.enabled) return;
swiper.recalcSlides();
const newSlidesOrder = [];
swiper.slides.forEach(slideEl => {
const index = typeof slideEl.swiperSlideIndex === 'undefined' ? slideEl.getAttribute('data-swiper-slide-index') * 1 : slideEl.swiperSlideIndex;
newSlidesOrder[index] = slideEl;
});
swiper.slides.forEach(slideEl => {
slideEl.removeAttribute('data-swiper-slide-index');
});
newSlidesOrder.forEach(slideEl => {
slidesEl.append(slideEl);
});
swiper.recalcSlides();
swiper.slideTo(swiper.realIndex, 0);
}
+140
View File
@@ -0,0 +1,140 @@
export default function loopFix({
slideRealIndex,
slideTo = true,
direction,
setTranslate,
activeSlideIndex,
byController,
byMousewheel
} = {}) {
const swiper = this;
if (!swiper.params.loop) return;
swiper.emit('beforeLoopFix');
const {
slides,
allowSlidePrev,
allowSlideNext,
slidesEl,
params
} = swiper;
swiper.allowSlidePrev = true;
swiper.allowSlideNext = true;
if (swiper.virtual && params.virtual.enabled) {
if (slideTo) {
if (!params.centeredSlides && swiper.snapIndex === 0) {
swiper.slideTo(swiper.virtual.slides.length, 0, false, true);
} else if (params.centeredSlides && swiper.snapIndex < params.slidesPerView) {
swiper.slideTo(swiper.virtual.slides.length + swiper.snapIndex, 0, false, true);
} else if (swiper.snapIndex === swiper.snapGrid.length - 1) {
swiper.slideTo(swiper.virtual.slidesBefore, 0, false, true);
}
}
swiper.allowSlidePrev = allowSlidePrev;
swiper.allowSlideNext = allowSlideNext;
swiper.emit('loopFix');
return;
}
const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : Math.ceil(parseFloat(params.slidesPerView, 10));
let loopedSlides = params.loopedSlides || slidesPerView;
if (loopedSlides % params.slidesPerGroup !== 0) {
loopedSlides += params.slidesPerGroup - loopedSlides % params.slidesPerGroup;
}
swiper.loopedSlides = loopedSlides;
const prependSlidesIndexes = [];
const appendSlidesIndexes = [];
let activeIndex = swiper.activeIndex;
if (typeof activeSlideIndex === 'undefined') {
activeSlideIndex = swiper.getSlideIndex(swiper.slides.filter(el => el.classList.contains(params.slideActiveClass))[0]);
} else {
activeIndex = activeSlideIndex;
}
const isNext = direction === 'next' || !direction;
const isPrev = direction === 'prev' || !direction;
let slidesPrepended = 0;
let slidesAppended = 0;
// prepend last slides before start
if (activeSlideIndex < loopedSlides) {
slidesPrepended = Math.max(loopedSlides - activeSlideIndex, params.slidesPerGroup);
for (let i = 0; i < loopedSlides - activeSlideIndex; i += 1) {
const index = i - Math.floor(i / slides.length) * slides.length;
prependSlidesIndexes.push(slides.length - index - 1);
}
} else if (activeSlideIndex /* + slidesPerView */ > swiper.slides.length - loopedSlides * 2) {
slidesAppended = Math.max(activeSlideIndex - (swiper.slides.length - loopedSlides * 2), params.slidesPerGroup);
for (let i = 0; i < slidesAppended; i += 1) {
const index = i - Math.floor(i / slides.length) * slides.length;
appendSlidesIndexes.push(index);
}
}
if (isPrev) {
prependSlidesIndexes.forEach(index => {
slidesEl.prepend(swiper.slides[index]);
});
}
if (isNext) {
appendSlidesIndexes.forEach(index => {
slidesEl.append(swiper.slides[index]);
});
}
swiper.recalcSlides();
if (params.watchSlidesProgress) {
swiper.updateSlidesOffset();
}
if (slideTo) {
if (prependSlidesIndexes.length > 0 && isPrev) {
if (typeof slideRealIndex === 'undefined') {
const currentSlideTranslate = swiper.slidesGrid[activeIndex];
const newSlideTranslate = swiper.slidesGrid[activeIndex + slidesPrepended];
const diff = newSlideTranslate - currentSlideTranslate;
if (byMousewheel) {
swiper.setTranslate(swiper.translate - diff);
} else {
swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);
if (setTranslate) {
swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
}
}
} else {
if (setTranslate) {
swiper.slideToLoop(slideRealIndex, 0, false, true);
}
}
} else if (appendSlidesIndexes.length > 0 && isNext) {
if (typeof slideRealIndex === 'undefined') {
const currentSlideTranslate = swiper.slidesGrid[activeIndex];
const newSlideTranslate = swiper.slidesGrid[activeIndex - slidesAppended];
const diff = newSlideTranslate - currentSlideTranslate;
if (byMousewheel) {
swiper.setTranslate(swiper.translate - diff);
} else {
swiper.slideTo(activeIndex - slidesAppended, 0, false, true);
if (setTranslate) {
swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
}
}
} else {
swiper.slideToLoop(slideRealIndex, 0, false, true);
}
}
}
swiper.allowSlidePrev = allowSlidePrev;
swiper.allowSlideNext = allowSlideNext;
if (swiper.controller && swiper.controller.control && !byController) {
const loopParams = {
slideRealIndex,
slideTo: false,
direction,
setTranslate,
activeSlideIndex,
byController: true
};
if (Array.isArray(swiper.controller.control)) {
swiper.controller.control.forEach(c => {
if (!c.destroyed && c.params.loop) c.loopFix(loopParams);
});
} else if (swiper.controller.control instanceof swiper.constructor && swiper.controller.control.params.loop) {
swiper.controller.control.loopFix(loopParams);
}
}
swiper.emit('loopFix');
}
+32
View File
@@ -0,0 +1,32 @@
import { extend } from '../shared/utils.js';
export default function moduleExtendParams(params, allModulesParams) {
return function extendParams(obj = {}) {
const moduleParamName = Object.keys(obj)[0];
const moduleParams = obj[moduleParamName];
if (typeof moduleParams !== 'object' || moduleParams === null) {
extend(allModulesParams, obj);
return;
}
if (['navigation', 'pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 && params[moduleParamName] === true) {
params[moduleParamName] = {
auto: true
};
}
if (!(moduleParamName in params && 'enabled' in moduleParams)) {
extend(allModulesParams, obj);
return;
}
if (params[moduleParamName] === true) {
params[moduleParamName] = {
enabled: true
};
}
if (typeof params[moduleParamName] === 'object' && !('enabled' in params[moduleParamName])) {
params[moduleParamName].enabled = true;
}
if (!params[moduleParamName]) params[moduleParamName] = {
enabled: false
};
extend(allModulesParams, obj);
};
}
+69
View File
@@ -0,0 +1,69 @@
import { getWindow } from 'ssr-window';
import { elementParents } from '../../../shared/utils.js';
export default function Observer({
swiper,
extendParams,
on,
emit
}) {
const observers = [];
const window = getWindow();
const attach = (target, 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.el);
for (let i = 0; i < containerParents.length; i += 1) {
attach(containerParents[i]);
}
}
// Observe container
attach(swiper.el, {
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);
}
+67
View File
@@ -0,0 +1,67 @@
import { getWindow } from 'ssr-window';
export default function Resize({
swiper,
on,
emit
}) {
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(({
contentBoxSize,
contentRect,
target
}) => {
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);
});
}
+16
View File
@@ -0,0 +1,16 @@
import slideTo from './slideTo.js';
import slideToLoop from './slideToLoop.js';
import slideNext from './slideNext.js';
import slidePrev from './slidePrev.js';
import slideReset from './slideReset.js';
import slideToClosest from './slideToClosest.js';
import slideToClickedSlide from './slideToClickedSlide.js';
export default {
slideTo,
slideToLoop,
slideNext,
slidePrev,
slideReset,
slideToClosest,
slideToClickedSlide
};
+28
View File
@@ -0,0 +1,28 @@
/* eslint no-unused-vars: "off" */
export default function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
const {
enabled,
params,
animating
} = swiper;
if (!enabled) return swiper;
let perGroup = params.slidesPerGroup;
if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
}
const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : perGroup;
const isVirtual = swiper.virtual && params.virtual.enabled;
if (params.loop) {
if (animating && !isVirtual && params.loopPreventsSliding) return false;
swiper.loopFix({
direction: 'next'
});
// eslint-disable-next-line
swiper._clientLeft = swiper.wrapperEl.clientLeft;
}
if (params.rewind && swiper.isEnd) {
return swiper.slideTo(0, speed, runCallbacks, internal);
}
return swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);
}
+56
View File
@@ -0,0 +1,56 @@
/* eslint no-unused-vars: "off" */
export default function slidePrev(speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
const {
params,
snapGrid,
slidesGrid,
rtlTranslate,
enabled,
animating
} = swiper;
if (!enabled) return swiper;
const isVirtual = swiper.virtual && params.virtual.enabled;
if (params.loop) {
if (animating && !isVirtual && params.loopPreventsSliding) return false;
swiper.loopFix({
direction: 'prev'
});
// eslint-disable-next-line
swiper._clientLeft = swiper.wrapperEl.clientLeft;
}
const translate = rtlTranslate ? swiper.translate : -swiper.translate;
function normalize(val) {
if (val < 0) return -Math.floor(Math.abs(val));
return Math.floor(val);
}
const normalizedTranslate = normalize(translate);
const normalizedSnapGrid = snapGrid.map(val => normalize(val));
let prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];
if (typeof prevSnap === 'undefined' && params.cssMode) {
let prevSnapIndex;
snapGrid.forEach((snap, snapIndex) => {
if (normalizedTranslate >= snap) {
// prevSnap = snap;
prevSnapIndex = snapIndex;
}
});
if (typeof prevSnapIndex !== 'undefined') {
prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
}
}
let prevIndex = 0;
if (typeof prevSnap !== 'undefined') {
prevIndex = slidesGrid.indexOf(prevSnap);
if (prevIndex < 0) prevIndex = swiper.activeIndex - 1;
if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
prevIndex = prevIndex - swiper.slidesPerViewDynamic('previous', true) + 1;
prevIndex = Math.max(prevIndex, 0);
}
}
if (params.rewind && swiper.isBeginning) {
const lastIndex = swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual ? swiper.virtual.slides.length - 1 : swiper.slides.length - 1;
return swiper.slideTo(lastIndex, speed, runCallbacks, internal);
}
return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
}
+5
View File
@@ -0,0 +1,5 @@
/* eslint no-unused-vars: "off" */
export default function slideReset(speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
}
+142
View File
@@ -0,0 +1,142 @@
import { animateCSSModeScroll } from '../../shared/utils.js';
export default function slideTo(index = 0, speed = this.params.speed, runCallbacks = true, internal, initial) {
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 (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial) {
return false;
}
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 && 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 = '';
swiper._immediateVirtual = false;
});
}
} else {
if (!swiper.support.smoothScroll) {
animateCSSModeScroll({
swiper,
targetPosition: t,
side: isH ? 'left' : 'top'
});
return true;
}
wrapperEl.scrollTo({
[isH ? 'left' : 'top']: t,
behavior: 'smooth'
});
}
return true;
}
swiper.setTransition(speed);
swiper.setTranslate(translate);
swiper.updateActiveIndex(slideIndex);
swiper.updateSlidesClasses();
swiper.emit('beforeTransitionStart', speed, internal);
swiper.transitionStart(runCallbacks, direction);
if (speed === 0) {
swiper.transitionEnd(runCallbacks, direction);
} else if (!swiper.animating) {
swiper.animating = true;
if (!swiper.onSlideToWrapperTransitionEnd) {
swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) {
if (!swiper || swiper.destroyed) return;
if (e.target !== this) return;
swiper.wrapperEl.removeEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
swiper.onSlideToWrapperTransitionEnd = null;
delete swiper.onSlideToWrapperTransitionEnd;
swiper.transitionEnd(runCallbacks, direction);
};
}
swiper.wrapperEl.addEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
}
return true;
}
+37
View File
@@ -0,0 +1,37 @@
import { elementChildren, nextTick } from '../../shared/utils.js';
export default function slideToClickedSlide() {
const swiper = this;
const {
params,
slidesEl
} = swiper;
const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;
let slideToIndex = swiper.clickedIndex;
let realIndex;
const slideSelector = swiper.isElement ? `swiper-slide` : `.${params.slideClass}`;
if (params.loop) {
if (swiper.animating) return;
realIndex = parseInt(swiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
if (params.centeredSlides) {
if (slideToIndex < swiper.loopedSlides - slidesPerView / 2 || slideToIndex > swiper.slides.length - swiper.loopedSlides + slidesPerView / 2) {
swiper.loopFix();
slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0]);
nextTick(() => {
swiper.slideTo(slideToIndex);
});
} else {
swiper.slideTo(slideToIndex);
}
} else if (slideToIndex > swiper.slides.length - slidesPerView) {
swiper.loopFix();
slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0]);
nextTick(() => {
swiper.slideTo(slideToIndex);
});
} else {
swiper.slideTo(slideToIndex);
}
} else {
swiper.slideTo(slideToIndex);
}
}
+28
View File
@@ -0,0 +1,28 @@
/* eslint no-unused-vars: "off" */
export default function slideToClosest(speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
const swiper = this;
let index = swiper.activeIndex;
const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
if (translate >= swiper.snapGrid[snapIndex]) {
// The current translate is on or after the current snap index, so the choice
// is between the current index and the one after it.
const currentSnap = swiper.snapGrid[snapIndex];
const nextSnap = swiper.snapGrid[snapIndex + 1];
if (translate - currentSnap > (nextSnap - currentSnap) * threshold) {
index += swiper.params.slidesPerGroup;
}
} else {
// The current translate is before the current snap index, so the choice
// is between the current index and the one before it.
const prevSnap = swiper.snapGrid[snapIndex - 1];
const currentSnap = swiper.snapGrid[snapIndex];
if (translate - prevSnap <= (currentSnap - prevSnap) * threshold) {
index -= swiper.params.slidesPerGroup;
}
}
index = Math.max(index, 0);
index = Math.min(index, swiper.slidesGrid.length - 1);
return swiper.slideTo(index, speed, runCallbacks, internal);
}
+17
View File
@@ -0,0 +1,17 @@
export default function slideToLoop(index = 0, speed = this.params.speed, runCallbacks = true, internal) {
if (typeof index === 'string') {
const indexAsNumber = parseInt(index, 10);
index = indexAsNumber;
}
const swiper = this;
let newIndex = index;
if (swiper.params.loop) {
if (swiper.virtual && swiper.params.virtual.enabled) {
// eslint-disable-next-line
newIndex = newIndex + swiper.virtual.slidesBefore;
} else {
newIndex = swiper.getSlideIndexByData(newIndex);
}
}
return swiper.slideTo(newIndex, speed, runCallbacks, internal);
}
+8
View File
@@ -0,0 +1,8 @@
import setTransition from './setTransition.js';
import transitionStart from './transitionStart.js';
import transitionEnd from './transitionEnd.js';
export default {
setTransition,
transitionStart,
transitionEnd
};
+7
View File
@@ -0,0 +1,7 @@
export default function setTransition(duration, byController) {
const swiper = this;
if (!swiper.params.cssMode) {
swiper.wrapperEl.style.transitionDuration = `${duration}ms`;
}
swiper.emit('setTransition', duration, byController);
}
+28
View File
@@ -0,0 +1,28 @@
export default function transitionEmit({
swiper,
runCallbacks,
direction,
step
}) {
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}`);
}
}
}
+16
View File
@@ -0,0 +1,16 @@
import transitionEmit from './transitionEmit.js';
export default function transitionEnd(runCallbacks = true, direction) {
const swiper = this;
const {
params
} = swiper;
swiper.animating = false;
if (params.cssMode) return;
swiper.setTransition(0);
transitionEmit({
swiper,
runCallbacks,
direction,
step: 'End'
});
}
+17
View File
@@ -0,0 +1,17 @@
import transitionEmit from './transitionEmit.js';
export default function transitionStart(runCallbacks = true, direction) {
const swiper = this;
const {
params
} = swiper;
if (params.cssMode) return;
if (params.autoHeight) {
swiper.updateAutoHeight();
}
transitionEmit({
swiper,
runCallbacks,
direction,
step: 'Start'
});
}
+19
View File
@@ -0,0 +1,19 @@
import { getTranslate } from '../../shared/utils.js';
export default function getSwiperTranslate(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);
if (rtl) currentTranslate = -currentTranslate;
return currentTranslate || 0;
}
+12
View File
@@ -0,0 +1,12 @@
import getTranslate from './getTranslate.js';
import setTranslate from './setTranslate.js';
import minTranslate from './minTranslate.js';
import maxTranslate from './maxTranslate.js';
import translateTo from './translateTo.js';
export default {
getTranslate,
setTranslate,
minTranslate,
maxTranslate,
translateTo
};
+3
View File
@@ -0,0 +1,3 @@
export default function maxTranslate() {
return -this.snapGrid[this.snapGrid.length - 1];
}
+3
View File
@@ -0,0 +1,3 @@
export default function minTranslate() {
return -this.snapGrid[0];
}
+41
View File
@@ -0,0 +1,41 @@
export default 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);
}
if (params.cssMode) {
wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;
} else if (!params.virtualTranslate) {
wrapperEl.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
}
swiper.previousTranslate = swiper.translate;
swiper.translate = swiper.isHorizontal() ? x : y;
// 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);
}
+70
View File
@@ -0,0 +1,70 @@
import { animateCSSModeScroll } from '../../shared/utils.js';
export default function translateTo(translate = 0, speed = this.params.speed, runCallbacks = true, translateBounds = true, internal) {
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;
if (runCallbacks) {
swiper.emit('transitionEnd');
}
};
}
swiper.wrapperEl.addEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd);
}
}
return true;
}
+20
View File
@@ -0,0 +1,20 @@
import updateSize from './updateSize.js';
import updateSlides from './updateSlides.js';
import updateAutoHeight from './updateAutoHeight.js';
import updateSlidesOffset from './updateSlidesOffset.js';
import updateSlidesProgress from './updateSlidesProgress.js';
import updateProgress from './updateProgress.js';
import updateSlidesClasses from './updateSlidesClasses.js';
import updateActiveIndex from './updateActiveIndex.js';
import updateClickedSlide from './updateClickedSlide.js';
export default {
updateSize,
updateSlides,
updateAutoHeight,
updateSlidesOffset,
updateSlidesProgress,
updateProgress,
updateSlidesClasses,
updateActiveIndex,
updateClickedSlide
};
+90
View File
@@ -0,0 +1,90 @@
export 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;
}
export default 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) {
if (snapIndex !== previousSnapIndex) {
swiper.snapIndex = snapIndex;
swiper.emit('snapIndexChange');
}
if (swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {
swiper.realIndex = getVirtualRealIndex(activeIndex);
}
return;
}
// Get real index
let realIndex;
if (swiper.virtual && params.virtual.enabled && params.loop) {
realIndex = getVirtualRealIndex(activeIndex);
} else if (swiper.slides[activeIndex]) {
realIndex = parseInt(swiper.slides[activeIndex].getAttribute('data-swiper-slide-index') || activeIndex, 10);
} else {
realIndex = activeIndex;
}
Object.assign(swiper, {
snapIndex,
realIndex,
previousIndex,
activeIndex
});
swiper.emit('activeIndexChange');
swiper.emit('snapIndexChange');
if (previousRealIndex !== realIndex) {
swiper.emit('realIndexChange');
}
if (swiper.initialized || swiper.params.runCallbacksOnInit) {
swiper.emit('slideChange');
}
}
+45
View File
@@ -0,0 +1,45 @@
export default 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.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`;
}
+31
View File
@@ -0,0 +1,31 @@
export default function updateClickedSlide(e) {
const swiper = this;
const params = swiper.params;
const slide = e.closest(`.${params.slideClass}, swiper-slide`);
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();
}
}
+62
View File
@@ -0,0 +1,62 @@
export default 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);
}
+31
View File
@@ -0,0 +1,31 @@
import { elementStyle } from '../../shared/utils.js';
export default 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
});
}
+285
View File
@@ -0,0 +1,285 @@
import { elementChildren, elementOuterSize, elementStyle, setCSSProperty } from '../../shared/utils.js';
export default function updateSlides() {
const swiper = this;
function getDirectionLabel(property) {
if (swiper.isHorizontal()) {
return property;
}
// prettier-ignore
return {
'width': 'height',
'margin-top': 'margin-left',
'margin-bottom ': 'margin-right',
'margin-left': 'margin-top',
'margin-right': 'margin-bottom',
'padding-left': 'padding-top',
'padding-right': 'padding-bottom',
'marginRight': 'marginBottom'
}[property];
}
function getDirectionPropertyValue(node, label) {
return parseFloat(node.getPropertyValue(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;
}
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(slidesLength);
}
// 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, slidesLength, getDirectionLabel);
}
if (slides[i] && elementStyle(slide, 'display') === 'none') continue; // eslint-disable-line
if (params.slidesPerView === 'auto') {
if (shouldResetSlideSize) {
slides[i].style[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[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 + params.spaceBetween}px`;
}
if (params.setWrapperSize) {
wrapperEl.style[getDirectionLabel('width')] = `${swiper.virtualSize + params.spaceBetween}px`;
}
if (gridEnabled) {
swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
}
// 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 (params.spaceBetween !== 0) {
const key = swiper.isHorizontal() && rtl ? 'marginLeft' : 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 + (params.spaceBetween ? params.spaceBetween : 0);
});
allSlidesSize -= params.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 + (params.spaceBetween ? params.spaceBetween : 0);
});
allSlidesSize -= params.spaceBetween;
if (allSlidesSize < swiperSize) {
const allSlidesOffset = (swiperSize - allSlidesSize) / 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();
}
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);
}
}
}
+52
View File
@@ -0,0 +1,52 @@
import { elementChildren, elementNextAll, elementPrevAll } from '../../shared/utils.js';
export default function updateSlidesClasses() {
const swiper = this;
const {
slides,
params,
slidesEl,
activeIndex
} = swiper;
const isVirtual = swiper.virtual && params.virtual.enabled;
const getFilteredSlide = selector => {
return elementChildren(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`)[0];
};
slides.forEach(slideEl => {
slideEl.classList.remove(params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
});
let activeSlide;
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 {
activeSlide = slides[activeIndex];
}
if (activeSlide) {
// Active classes
activeSlide.classList.add(params.slideActiveClass);
// Next Slide
let nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
if (params.loop && !nextSlide) {
nextSlide = slides[0];
}
if (nextSlide) {
nextSlide.classList.add(params.slideNextClass);
}
// Prev Slide
let prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
if (params.loop && !prevSlide === 0) {
prevSlide = slides[slides.length - 1];
}
if (prevSlide) {
prevSlide.classList.add(params.slidePrevClass);
}
}
swiper.emitSlidesClasses();
}
+9
View File
@@ -0,0 +1,9 @@
export default 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;
}
}
+39
View File
@@ -0,0 +1,39 @@
export default function updateSlidesProgress(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;
// Visible Slides
slides.forEach(slideEl => {
slideEl.classList.remove(params.slideVisibleClass);
});
swiper.visibleSlidesIndexes = [];
swiper.visibleSlides = [];
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 + params.spaceBetween);
const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
const slideBefore = -(offsetCenter - slideOffset);
const slideAfter = slideBefore + 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);
slides[i].classList.add(params.slideVisibleClass);
}
slide.progress = rtl ? -slideProgress : slideProgress;
slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
}
}
+118
View File
@@ -0,0 +1,118 @@
import { attrToProp, extend } from '../components-shared/utils.js';
import { paramsList } from '../components-shared/params-list.js';
import defaults from '../core/defaults.js';
const formatValue = (val) => {
if (parseFloat(val) === Number(val)) return Number(val);
if (val === 'true') return true;
if (val === '') return true;
if (val === 'false') return false;
if (val === 'null') return null;
if (val === 'undefined') return undefined;
return val;
};
const modulesParamsList = [
'a11y',
'autoplay',
'controller',
'cards-effect',
'coverflow-effect',
'creative-effect',
'cube-effect',
'fade-effect',
'flip-effect',
'free-mode',
'grid',
'hash-navigation',
'history',
'keyboard',
'mousewheel',
'navigation',
'pagination',
'parallax',
'scrollbar',
'thumbs',
'virtual',
'zoom',
];
function getParams(element) {
const params = {};
const passedParams = {};
extend(params, defaults);
const localParamsList = [...paramsList, 'on'];
const allowedParams = localParamsList.map((key) => key.replace(/_/, ''));
// First check props
localParamsList.forEach((paramName) => {
paramName = paramName.replace('_', '');
if (typeof element[paramName] !== 'undefined') {
passedParams[paramName] = element[paramName];
}
});
// Attributes
[...element.attributes].forEach((attr) => {
const moduleParam = modulesParamsList.filter(
(mParam) => attr.name.indexOf(`${mParam}-`) === 0,
)[0];
if (moduleParam) {
const parentObjName = attrToProp(moduleParam);
const subObjName = attrToProp(attr.name.split(`${moduleParam}-`)[1]);
if (!passedParams[parentObjName]) passedParams[parentObjName] = {};
if (passedParams[parentObjName] === true) {
passedParams[parentObjName] = { enabled: true };
}
passedParams[parentObjName][subObjName] = formatValue(attr.value);
} else {
const name = attrToProp(attr.name);
if (!allowedParams.includes(name)) return;
const value = formatValue(attr.value);
if (passedParams[name] && modulesParamsList.includes(attr.name)) {
if (passedParams[name].constructor !== Object) {
passedParams[name] = {};
}
passedParams[name].enabled = value;
} else {
passedParams[name] = value;
}
}
});
extend(params, passedParams);
if (params.navigation) {
params.navigation = {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next',
...(params.navigation !== true ? params.navigation : {}),
};
} else if (params.navigation === false) {
delete params.navigation;
}
if (params.scrollbar) {
params.scrollbar = {
el: '.swiper-scrollbar',
...(params.scrollbar !== true ? params.scrollbar : {}),
};
} else if (params.scrollbar === false) {
delete params.scrollbar;
}
if (params.pagination) {
params.pagination = {
el: '.swiper-pagination',
...(params.pagination !== true ? params.pagination : {}),
};
} else if (params.pagination === false) {
delete params.pagination;
}
return { params, passedParams };
}
export { getParams };
File diff suppressed because one or more lines are too long
+5
View File
@@ -0,0 +1,5 @@
declare const SwiperContainer: HTMLElement;
declare const SwiperSlide: HTMLElement;
declare const register: (injectStyles?: boolean) => void;
export { register, SwiperContainer, SwiperSlide };
+282
View File
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
.swiper .swiper-notification,swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
+342
View File
@@ -0,0 +1,342 @@
import classesToSelector from '../../shared/classes-to-selector.js';
import { createElement, elementIndex } from '../../shared/utils.js';
export default function A11y({
swiper,
extendParams,
on
}) {
extendParams({
a11y: {
enabled: true,
notificationClass: 'swiper-notification',
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide',
firstSlideMessage: 'This is the first slide',
lastSlideMessage: 'This is the last slide',
paginationBulletMessage: 'Go to slide {{index}}',
slideLabelMessage: '{{index}} / {{slidesLength}}',
containerMessage: null,
containerRoleDescriptionMessage: null,
itemRoleDescriptionMessage: null,
slideRole: 'group',
id: null
}
});
swiper.a11y = {
clicked: false
};
let liveRegion = null;
function notify(message) {
const notification = liveRegion;
if (notification.length === 0) return;
notification.innerHTML = '';
notification.innerHTML = message;
}
const makeElementsArray = el => {
if (!Array.isArray(el)) el = [el].filter(e => !!e);
return el;
};
function getRandomNumber(size = 16) {
const randomChar = () => Math.round(16 * Math.random()).toString(16);
return 'x'.repeat(size).replace(/x/g, randomChar);
}
function makeElFocusable(el) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('tabIndex', '0');
});
}
function makeElNotFocusable(el) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('tabIndex', '-1');
});
}
function addElRole(el, role) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('role', role);
});
}
function addElRoleDescription(el, description) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('aria-roledescription', description);
});
}
function addElControls(el, controls) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('aria-controls', controls);
});
}
function addElLabel(el, label) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('aria-label', label);
});
}
function addElId(el, id) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('id', id);
});
}
function addElLive(el, live) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('aria-live', live);
});
}
function disableEl(el) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('aria-disabled', true);
});
}
function enableEl(el) {
el = makeElementsArray(el);
el.forEach(subEl => {
subEl.setAttribute('aria-disabled', false);
});
}
function onEnterOrSpaceKey(e) {
if (e.keyCode !== 13 && e.keyCode !== 32) return;
const params = swiper.params.a11y;
const targetEl = e.target;
if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
}
if (swiper.navigation && swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl) {
if (!(swiper.isEnd && !swiper.params.loop)) {
swiper.slideNext();
}
if (swiper.isEnd) {
notify(params.lastSlideMessage);
} else {
notify(params.nextSlideMessage);
}
}
if (swiper.navigation && swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl) {
if (!(swiper.isBeginning && !swiper.params.loop)) {
swiper.slidePrev();
}
if (swiper.isBeginning) {
notify(params.firstSlideMessage);
} else {
notify(params.prevSlideMessage);
}
}
if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
targetEl.click();
}
}
function updateNavigation() {
if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
const {
nextEl,
prevEl
} = swiper.navigation;
if (prevEl) {
if (swiper.isBeginning) {
disableEl(prevEl);
makeElNotFocusable(prevEl);
} else {
enableEl(prevEl);
makeElFocusable(prevEl);
}
}
if (nextEl) {
if (swiper.isEnd) {
disableEl(nextEl);
makeElNotFocusable(nextEl);
} else {
enableEl(nextEl);
makeElFocusable(nextEl);
}
}
}
function hasPagination() {
return swiper.pagination && swiper.pagination.bullets && swiper.pagination.bullets.length;
}
function hasClickablePagination() {
return hasPagination() && swiper.params.pagination.clickable;
}
function updatePagination() {
const params = swiper.params.a11y;
if (!hasPagination()) return;
swiper.pagination.bullets.forEach(bulletEl => {
if (swiper.params.pagination.clickable) {
makeElFocusable(bulletEl);
if (!swiper.params.pagination.renderBullet) {
addElRole(bulletEl, 'button');
addElLabel(bulletEl, params.paginationBulletMessage.replace(/\{\{index\}\}/, elementIndex(bulletEl) + 1));
}
}
if (bulletEl.matches(classesToSelector(swiper.params.pagination.bulletActiveClass))) {
bulletEl.setAttribute('aria-current', 'true');
} else {
bulletEl.removeAttribute('aria-current');
}
});
}
const initNavEl = (el, wrapperId, message) => {
makeElFocusable(el);
if (el.tagName !== 'BUTTON') {
addElRole(el, 'button');
el.addEventListener('keydown', onEnterOrSpaceKey);
}
addElLabel(el, message);
addElControls(el, wrapperId);
};
const handlePointerDown = () => {
swiper.a11y.clicked = true;
};
const handlePointerUp = () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
if (!swiper.destroyed) {
swiper.a11y.clicked = false;
}
});
});
};
const handleFocus = e => {
if (swiper.a11y.clicked) return;
const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
if (!slideEl || !swiper.slides.includes(slideEl)) return;
const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
if (isActive || isVisible) return;
if (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) return;
if (swiper.isHorizontal()) {
swiper.el.scrollLeft = 0;
} else {
swiper.el.scrollTop = 0;
}
swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
};
const initSlides = () => {
const params = swiper.params.a11y;
if (params.itemRoleDescriptionMessage) {
addElRoleDescription(swiper.slides, params.itemRoleDescriptionMessage);
}
if (params.slideRole) {
addElRole(swiper.slides, params.slideRole);
}
const slidesLength = swiper.slides.length;
if (params.slideLabelMessage) {
swiper.slides.forEach((slideEl, index) => {
const slideIndex = swiper.params.loop ? parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10) : index;
const ariaLabelMessage = params.slideLabelMessage.replace(/\{\{index\}\}/, slideIndex + 1).replace(/\{\{slidesLength\}\}/, slidesLength);
addElLabel(slideEl, ariaLabelMessage);
});
}
};
const init = () => {
const params = swiper.params.a11y;
swiper.el.append(liveRegion);
// Container
const containerEl = swiper.el;
if (params.containerRoleDescriptionMessage) {
addElRoleDescription(containerEl, params.containerRoleDescriptionMessage);
}
if (params.containerMessage) {
addElLabel(containerEl, params.containerMessage);
}
// Wrapper
const wrapperEl = swiper.wrapperEl;
const wrapperId = params.id || wrapperEl.getAttribute('id') || `swiper-wrapper-${getRandomNumber(16)}`;
const live = swiper.params.autoplay && swiper.params.autoplay.enabled ? 'off' : 'polite';
addElId(wrapperEl, wrapperId);
addElLive(wrapperEl, live);
// Slide
initSlides();
// Navigation
let {
nextEl,
prevEl
} = swiper.navigation ? swiper.navigation : {};
nextEl = makeElementsArray(nextEl);
prevEl = makeElementsArray(prevEl);
if (nextEl) {
nextEl.forEach(el => initNavEl(el, wrapperId, params.nextSlideMessage));
}
if (prevEl) {
prevEl.forEach(el => initNavEl(el, wrapperId, params.prevSlideMessage));
}
// Pagination
if (hasClickablePagination()) {
const paginationEl = Array.isArray(swiper.pagination.el) ? swiper.pagination.el : [swiper.pagination.el];
paginationEl.forEach(el => {
el.addEventListener('keydown', onEnterOrSpaceKey);
});
}
// Tab focus
swiper.el.addEventListener('focus', handleFocus, true);
swiper.el.addEventListener('pointerdown', handlePointerDown, true);
swiper.el.addEventListener('pointerup', handlePointerUp, true);
};
function destroy() {
if (liveRegion && liveRegion.length > 0) liveRegion.remove();
let {
nextEl,
prevEl
} = swiper.navigation ? swiper.navigation : {};
nextEl = makeElementsArray(nextEl);
prevEl = makeElementsArray(prevEl);
if (nextEl) {
nextEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
}
if (prevEl) {
prevEl.forEach(el => el.removeEventListener('keydown', onEnterOrSpaceKey));
}
// Pagination
if (hasClickablePagination()) {
const paginationEl = Array.isArray(swiper.pagination.el) ? swiper.pagination.el : [swiper.pagination.el];
paginationEl.forEach(el => {
el.removeEventListener('keydown', onEnterOrSpaceKey);
});
}
// Tab focus
swiper.el.removeEventListener('focus', handleFocus, true);
swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
swiper.el.removeEventListener('pointerup', handlePointerUp, true);
}
on('beforeInit', () => {
liveRegion = createElement('span', swiper.params.a11y.notificationClass);
liveRegion.setAttribute('aria-live', 'assertive');
liveRegion.setAttribute('aria-atomic', 'true');
if (swiper.isElement) {
liveRegion.setAttribute('slot', 'container-end');
}
});
on('afterInit', () => {
if (!swiper.params.a11y.enabled) return;
init();
});
on('slidesLengthChange snapGridLengthChange slidesGridLengthChange', () => {
if (!swiper.params.a11y.enabled) return;
initSlides();
});
on('fromEdge toEdge afterInit lock unlock', () => {
if (!swiper.params.a11y.enabled) return;
updateNavigation();
});
on('paginationUpdate', () => {
if (!swiper.params.a11y.enabled) return;
updatePagination();
});
on('destroy', () => {
if (!swiper.params.a11y.enabled) return;
destroy();
});
}
+10
View File
@@ -0,0 +1,10 @@
/* a11y */
.swiper .swiper-notification,
swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
+1
View File
@@ -0,0 +1 @@
.swiper .swiper-notification,swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
+10
View File
@@ -0,0 +1,10 @@
/* a11y */
.swiper .swiper-notification,
swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
View File
+279
View File
@@ -0,0 +1,279 @@
/* eslint no-underscore-dangle: "off" */
/* eslint no-use-before-define: "off" */
import { getDocument } from 'ssr-window';
export default function Autoplay({
swiper,
extendParams,
on,
emit,
params
}) {
swiper.autoplay = {
running: false,
paused: false,
timeLeft: 0
};
extendParams({
autoplay: {
enabled: false,
delay: 3000,
waitForTransition: true,
disableOnInteraction: true,
stopOnLastSlide: false,
reverseDirection: false,
pauseOnMouseEnter: false
}
});
let timeout;
let raf;
let autoplayDelayTotal = params && params.autoplay ? params.autoplay.delay : 3000;
let autoplayDelayCurrent = params && params.autoplay ? params.autoplay.delay : 3000;
let autoplayTimeLeft;
let autoplayStartTime = new Date().getTime;
let wasPaused;
let isTouched;
let pausedByTouch;
let touchStartTimeout;
let slideChanged;
let pausedByInteraction;
function onTransitionEnd(e) {
if (!swiper || swiper.destroyed || !swiper.wrapperEl) return;
if (e.target !== swiper.wrapperEl) return;
swiper.wrapperEl.removeEventListener('transitionend', onTransitionEnd);
resume();
}
const calcTimeLeft = () => {
if (swiper.destroyed || !swiper.autoplay.running) return;
if (swiper.autoplay.paused) {
wasPaused = true;
} else if (wasPaused) {
autoplayDelayCurrent = autoplayTimeLeft;
wasPaused = false;
}
const timeLeft = swiper.autoplay.paused ? autoplayTimeLeft : autoplayStartTime + autoplayDelayCurrent - new Date().getTime();
swiper.autoplay.timeLeft = timeLeft;
emit('autoplayTimeLeft', timeLeft, timeLeft / autoplayDelayTotal);
raf = requestAnimationFrame(() => {
calcTimeLeft();
});
};
const getSlideDelay = () => {
let activeSlideEl;
if (swiper.virtual && swiper.params.virtual.enabled) {
activeSlideEl = swiper.slides.filter(slideEl => slideEl.classList.contains('swiper-slide-active'))[0];
} else {
activeSlideEl = swiper.slides[swiper.activeIndex];
}
if (!activeSlideEl) return undefined;
const currentSlideDelay = parseInt(activeSlideEl.getAttribute('data-swiper-autoplay'), 10);
return currentSlideDelay;
};
const run = delayForce => {
if (swiper.destroyed || !swiper.autoplay.running) return;
cancelAnimationFrame(raf);
calcTimeLeft();
let delay = typeof delayForce === 'undefined' ? swiper.params.autoplay.delay : delayForce;
autoplayDelayTotal = swiper.params.autoplay.delay;
autoplayDelayCurrent = swiper.params.autoplay.delay;
const currentSlideDelay = getSlideDelay();
if (!Number.isNaN(currentSlideDelay) && currentSlideDelay > 0 && typeof delayForce === 'undefined') {
delay = currentSlideDelay;
autoplayDelayTotal = currentSlideDelay;
autoplayDelayCurrent = currentSlideDelay;
}
autoplayTimeLeft = delay;
const speed = swiper.params.speed;
const proceed = () => {
if (!swiper || swiper.destroyed) return;
if (swiper.params.autoplay.reverseDirection) {
if (!swiper.isBeginning || swiper.params.loop || swiper.params.rewind) {
swiper.slidePrev(speed, true, true);
emit('autoplay');
} else if (!swiper.params.autoplay.stopOnLastSlide) {
swiper.slideTo(swiper.slides.length - 1, speed, true, true);
emit('autoplay');
}
} else {
if (!swiper.isEnd || swiper.params.loop || swiper.params.rewind) {
swiper.slideNext(speed, true, true);
emit('autoplay');
} else if (!swiper.params.autoplay.stopOnLastSlide) {
swiper.slideTo(0, speed, true, true);
emit('autoplay');
}
}
if (swiper.params.cssMode) {
autoplayStartTime = new Date().getTime();
requestAnimationFrame(() => {
run();
});
}
};
if (delay > 0) {
clearTimeout(timeout);
timeout = setTimeout(() => {
proceed();
}, delay);
} else {
requestAnimationFrame(() => {
proceed();
});
}
// eslint-disable-next-line
return delay;
};
const start = () => {
swiper.autoplay.running = true;
run();
emit('autoplayStart');
};
const stop = () => {
swiper.autoplay.running = false;
clearTimeout(timeout);
cancelAnimationFrame(raf);
emit('autoplayStop');
};
const pause = (internal, reset) => {
if (swiper.destroyed || !swiper.autoplay.running) return;
clearTimeout(timeout);
if (!internal) {
pausedByInteraction = true;
}
const proceed = () => {
emit('autoplayPause');
if (swiper.params.autoplay.waitForTransition) {
swiper.wrapperEl.addEventListener('transitionend', onTransitionEnd);
} else {
resume();
}
};
swiper.autoplay.paused = true;
if (reset) {
if (slideChanged) {
autoplayTimeLeft = swiper.params.autoplay.delay;
}
slideChanged = false;
proceed();
return;
}
const delay = autoplayTimeLeft || swiper.params.autoplay.delay;
autoplayTimeLeft = delay - (new Date().getTime() - autoplayStartTime);
if (swiper.isEnd && autoplayTimeLeft < 0 && !swiper.params.loop) return;
if (autoplayTimeLeft < 0) autoplayTimeLeft = 0;
proceed();
};
const resume = () => {
if (swiper.isEnd && autoplayTimeLeft < 0 && !swiper.params.loop || swiper.destroyed || !swiper.autoplay.running) return;
autoplayStartTime = new Date().getTime();
if (pausedByInteraction) {
pausedByInteraction = false;
run(autoplayTimeLeft);
} else {
run();
}
swiper.autoplay.paused = false;
emit('autoplayResume');
};
const onVisibilityChange = () => {
if (swiper.destroyed || !swiper.autoplay.running) return;
const document = getDocument();
if (document.visibilityState === 'hidden') {
pausedByInteraction = true;
pause(true);
}
if (document.visibilityState === 'visible') {
resume();
}
};
const onPointerEnter = e => {
if (e.pointerType !== 'mouse') return;
pausedByInteraction = true;
pause(true);
};
const onPointerLeave = e => {
if (e.pointerType !== 'mouse') return;
if (swiper.autoplay.paused) {
resume();
}
};
const attachMouseEvents = () => {
if (swiper.params.autoplay.pauseOnMouseEnter) {
swiper.el.addEventListener('pointerenter', onPointerEnter);
swiper.el.addEventListener('pointerleave', onPointerLeave);
}
};
const detachMouseEvents = () => {
swiper.el.removeEventListener('pointerenter', onPointerEnter);
swiper.el.removeEventListener('pointerleave', onPointerLeave);
};
const attachDocumentEvents = () => {
const document = getDocument();
document.addEventListener('visibilitychange', onVisibilityChange);
};
const detachDocumentEvents = () => {
const document = getDocument();
document.removeEventListener('visibilitychange', onVisibilityChange);
};
on('init', () => {
if (swiper.params.autoplay.enabled) {
attachMouseEvents();
attachDocumentEvents();
autoplayStartTime = new Date().getTime();
start();
}
});
on('destroy', () => {
detachMouseEvents();
detachDocumentEvents();
if (swiper.autoplay.running) {
stop();
}
});
on('beforeTransitionStart', (_s, speed, internal) => {
if (swiper.destroyed || !swiper.autoplay.running) return;
if (internal || !swiper.params.autoplay.disableOnInteraction) {
pause(true, true);
} else {
stop();
}
});
on('sliderFirstMove', () => {
if (swiper.destroyed || !swiper.autoplay.running) return;
if (swiper.params.autoplay.disableOnInteraction) {
stop();
return;
}
isTouched = true;
pausedByTouch = false;
pausedByInteraction = false;
touchStartTimeout = setTimeout(() => {
pausedByInteraction = true;
pausedByTouch = true;
pause(true);
}, 200);
});
on('touchEnd', () => {
if (swiper.destroyed || !swiper.autoplay.running || !isTouched) return;
clearTimeout(touchStartTimeout);
clearTimeout(timeout);
if (swiper.params.autoplay.disableOnInteraction) {
pausedByTouch = false;
isTouched = false;
return;
}
if (pausedByTouch && swiper.params.cssMode) resume();
pausedByTouch = false;
isTouched = false;
});
on('slideChange', () => {
if (swiper.destroyed || !swiper.autoplay.running) return;
slideChanged = true;
});
Object.assign(swiper.autoplay, {
start,
stop,
pause,
resume
});
}
View File
View File
View File
+180
View File
@@ -0,0 +1,180 @@
/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
import { elementTransitionEnd, nextTick } from '../../shared/utils.js';
export default function Controller({
swiper,
extendParams,
on
}) {
extendParams({
controller: {
control: undefined,
inverse: false,
by: 'slide' // or 'container'
}
});
swiper.controller = {
control: undefined
};
function LinearSpline(x, y) {
const binarySearch = function search() {
let maxIndex;
let minIndex;
let guess;
return (array, val) => {
minIndex = -1;
maxIndex = array.length;
while (maxIndex - minIndex > 1) {
guess = maxIndex + minIndex >> 1;
if (array[guess] <= val) {
minIndex = guess;
} else {
maxIndex = guess;
}
}
return maxIndex;
};
}();
this.x = x;
this.y = y;
this.lastIndex = x.length - 1;
// Given an x value (x2), return the expected y2 value:
// (x1,y1) is the known point before given value,
// (x3,y3) is the known point after given value.
let i1;
let i3;
this.interpolate = function interpolate(x2) {
if (!x2) return 0;
// Get the indexes of x1 and x3 (the array indexes before and after given x2):
i3 = binarySearch(this.x, x2);
i1 = i3 - 1;
// We have our indexes i1 & i3, so we can calculate already:
// y2 := ((x2x1) × (y3y1)) ÷ (x3x1) + y1
return (x2 - this.x[i1]) * (this.y[i3] - this.y[i1]) / (this.x[i3] - this.x[i1]) + this.y[i1];
};
return this;
}
// xxx: for now i will just save one spline function to to
function getInterpolateFunction(c) {
if (!swiper.controller.spline) {
swiper.controller.spline = swiper.params.loop ? new LinearSpline(swiper.slidesGrid, c.slidesGrid) : new LinearSpline(swiper.snapGrid, c.snapGrid);
}
}
function setTranslate(_t, byController) {
const controlled = swiper.controller.control;
let multiplier;
let controlledTranslate;
const Swiper = swiper.constructor;
function setControlledTranslate(c) {
// this will create an Interpolate function based on the snapGrids
// x is the Grid of the scrolled scroller and y will be the controlled scroller
// it makes sense to create this only once and recall it for the interpolation
// the function does a lot of value caching for performance
const translate = swiper.rtlTranslate ? -swiper.translate : swiper.translate;
if (swiper.params.controller.by === 'slide') {
getInterpolateFunction(c);
// i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid
// but it did not work out
controlledTranslate = -swiper.controller.spline.interpolate(-translate);
}
if (!controlledTranslate || swiper.params.controller.by === 'container') {
multiplier = (c.maxTranslate() - c.minTranslate()) / (swiper.maxTranslate() - swiper.minTranslate());
controlledTranslate = (translate - swiper.minTranslate()) * multiplier + c.minTranslate();
}
if (swiper.params.controller.inverse) {
controlledTranslate = c.maxTranslate() - controlledTranslate;
}
c.updateProgress(controlledTranslate);
c.setTranslate(controlledTranslate, swiper);
c.updateActiveIndex();
c.updateSlidesClasses();
}
if (Array.isArray(controlled)) {
for (let i = 0; i < controlled.length; i += 1) {
if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
setControlledTranslate(controlled[i]);
}
}
} else if (controlled instanceof Swiper && byController !== controlled) {
setControlledTranslate(controlled);
}
}
function setTransition(duration, byController) {
const Swiper = swiper.constructor;
const controlled = swiper.controller.control;
let i;
function setControlledTransition(c) {
c.setTransition(duration, swiper);
if (duration !== 0) {
c.transitionStart();
if (c.params.autoHeight) {
nextTick(() => {
c.updateAutoHeight();
});
}
elementTransitionEnd(c.wrapperEl, () => {
if (!controlled) return;
c.transitionEnd();
});
}
}
if (Array.isArray(controlled)) {
for (i = 0; i < controlled.length; i += 1) {
if (controlled[i] !== byController && controlled[i] instanceof Swiper) {
setControlledTransition(controlled[i]);
}
}
} else if (controlled instanceof Swiper && byController !== controlled) {
setControlledTransition(controlled);
}
}
function removeSpline() {
if (!swiper.controller.control) return;
if (swiper.controller.spline) {
swiper.controller.spline = undefined;
delete swiper.controller.spline;
}
}
on('beforeInit', () => {
if (typeof window !== 'undefined' && (
// eslint-disable-line
typeof swiper.params.controller.control === 'string' || swiper.params.controller.control instanceof HTMLElement)) {
const controlElement = document.querySelector(swiper.params.controller.control);
if (controlElement && controlElement.swiper) {
swiper.controller.control = controlElement.swiper;
} else if (controlElement) {
const onControllerSwiper = e => {
swiper.controller.control = e.detail[0];
swiper.update();
controlElement.removeEventListener('init', onControllerSwiper);
};
controlElement.addEventListener('init', onControllerSwiper);
}
return;
}
swiper.controller.control = swiper.params.controller.control;
});
on('update', () => {
removeSpline();
});
on('resize', () => {
removeSpline();
});
on('observerUpdate', () => {
removeSpline();
});
on('setTranslate', (_s, translate, byController) => {
if (!swiper.controller.control) return;
swiper.controller.setTranslate(translate, byController);
});
on('setTransition', (_s, duration, byController) => {
if (!swiper.controller.control) return;
swiper.controller.setTransition(duration, byController);
});
Object.assign(swiper.controller, {
setTranslate,
setTransition
});
}
View File
View File
View File
@@ -0,0 +1 @@
.swiper-cards{overflow:visible}.swiper-cards swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
+116
View File
@@ -0,0 +1,116 @@
import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectCards({
swiper,
extendParams,
on
}) {
extendParams({
cardsEffect: {
slideShadows: true,
rotate: true,
perSlideRotate: 2,
perSlideOffset: 8
}
});
const setTranslate = () => {
const {
slides,
activeIndex
} = swiper;
const params = swiper.params.cardsEffect;
const {
startTranslate,
isTouched
} = swiper.touchEventsData;
const currentTranslate = swiper.translate;
for (let i = 0; i < slides.length; i += 1) {
const slideEl = slides[i];
const slideProgress = slideEl.progress;
const progress = Math.min(Math.max(slideProgress, -4), 4);
let offset = slideEl.swiperSlideOffset;
if (swiper.params.centeredSlides && !swiper.params.cssMode) {
swiper.wrapperEl.style.transform = `translateX(${swiper.minTranslate()}px)`;
}
if (swiper.params.centeredSlides && swiper.params.cssMode) {
offset -= slides[0].swiperSlideOffset;
}
let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset;
let tY = 0;
const tZ = -100 * Math.abs(progress);
let scale = 1;
let rotate = -params.perSlideRotate * progress;
let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;
const slideIndex = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i;
const isSwipeToNext = (slideIndex === activeIndex || slideIndex === activeIndex - 1) && progress > 0 && progress < 1 && (isTouched || swiper.params.cssMode) && currentTranslate < startTranslate;
const isSwipeToPrev = (slideIndex === activeIndex || slideIndex === activeIndex + 1) && progress < 0 && progress > -1 && (isTouched || swiper.params.cssMode) && currentTranslate > startTranslate;
if (isSwipeToNext || isSwipeToPrev) {
const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5;
rotate += -28 * progress * subProgress;
scale += -0.5 * subProgress;
tXAdd += 96 * subProgress;
tY = `${-25 * subProgress * Math.abs(progress)}%`;
}
if (progress < 0) {
// next
tX = `calc(${tX}px + (${tXAdd * Math.abs(progress)}%))`;
} else if (progress > 0) {
// prev
tX = `calc(${tX}px + (-${tXAdd * Math.abs(progress)}%))`;
} else {
tX = `${tX}px`;
}
if (!swiper.isHorizontal()) {
const prevY = tY;
tY = tX;
tX = prevY;
}
const scaleString = progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`;
const transform = `
translate3d(${tX}, ${tY}, ${tZ}px)
rotateZ(${params.rotate ? rotate : 0}deg)
scale(${scaleString})
`;
if (params.slideShadows) {
// Set shadows
let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
if (!shadowEl) {
shadowEl = createShadow(params, slideEl);
}
if (shadowEl) shadowEl.style.opacity = Math.min(Math.max((Math.abs(progress) - 0.5) / 0.5, 0), 1);
}
slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
const targetEl = effectTarget(params, slideEl);
targetEl.style.transform = transform;
}
};
const setTransition = duration => {
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
transformElements.forEach(el => {
el.style.transitionDuration = `${duration}ms`;
el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
shadowEl.style.transitionDuration = `${duration}ms`;
});
});
effectVirtualTransitionEnd({
swiper,
duration,
transformElements
});
};
effectInit({
effect: 'cards',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
watchSlidesProgress: true,
virtualTranslate: !swiper.params.cssMode
})
});
}
+8
View File
@@ -0,0 +1,8 @@
.swiper-cards {
overflow: visible;
.swiper-slide {
transform-origin: center bottom;
backface-visibility: hidden;
overflow: hidden;
}
}
+1
View File
@@ -0,0 +1 @@
.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
+8
View File
@@ -0,0 +1,8 @@
.swiper-cards {
overflow: visible;
.swiper-slide {
transform-origin: center bottom;
backface-visibility: hidden;
overflow: hidden;
}
}
+99
View File
@@ -0,0 +1,99 @@
import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectCoverflow({
swiper,
extendParams,
on
}) {
extendParams({
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
scale: 1,
modifier: 1,
slideShadows: true
}
});
const setTranslate = () => {
const {
width: swiperWidth,
height: swiperHeight,
slides,
slidesSizesGrid
} = swiper;
const params = swiper.params.coverflowEffect;
const isHorizontal = swiper.isHorizontal();
const transform = swiper.translate;
const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
const rotate = isHorizontal ? params.rotate : -params.rotate;
const translate = params.depth;
// Each slide offset from center
for (let i = 0, length = slides.length; i < length; i += 1) {
const slideEl = slides[i];
const slideSize = slidesSizesGrid[i];
const slideOffset = slideEl.swiperSlideOffset;
const centerOffset = (center - slideOffset - slideSize / 2) / slideSize;
const offsetMultiplier = typeof params.modifier === 'function' ? params.modifier(centerOffset) : centerOffset * params.modifier;
let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
// var rotateZ = 0
let translateZ = -translate * Math.abs(offsetMultiplier);
let stretch = params.stretch;
// Allow percentage to make a relative stretch for responsive sliders
if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
stretch = parseFloat(params.stretch) / 100 * slideSize;
}
let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier);
// Fix for ultra small values
if (Math.abs(translateX) < 0.001) translateX = 0;
if (Math.abs(translateY) < 0.001) translateY = 0;
if (Math.abs(translateZ) < 0.001) translateZ = 0;
if (Math.abs(rotateY) < 0.001) rotateY = 0;
if (Math.abs(rotateX) < 0.001) rotateX = 0;
if (Math.abs(scale) < 0.001) scale = 0;
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
const targetEl = effectTarget(params, slideEl);
targetEl.style.transform = slideTransform;
slideEl.style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
if (params.slideShadows) {
// Set shadows
let shadowBeforeEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
let shadowAfterEl = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
if (!shadowBeforeEl) {
shadowBeforeEl = createShadow(params, slideEl, isHorizontal ? 'left' : 'top');
}
if (!shadowAfterEl) {
shadowAfterEl = createShadow(params, slideEl, isHorizontal ? 'right' : 'bottom');
}
if (shadowBeforeEl) shadowBeforeEl.style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
if (shadowAfterEl) shadowAfterEl.style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
}
}
};
const setTransition = duration => {
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
transformElements.forEach(el => {
el.style.transitionDuration = `${duration}ms`;
el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {
shadowEl.style.transitionDuration = `${duration}ms`;
});
});
};
effectInit({
effect: 'coverflow',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
watchSlidesProgress: true
})
});
}
+2
View File
@@ -0,0 +1,2 @@
.swiper-coverflow {
}
+2
View File
@@ -0,0 +1,2 @@
.swiper-coverflow {
}
@@ -0,0 +1 @@
.swiper-creative swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}
+140
View File
@@ -0,0 +1,140 @@
import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectCreative({
swiper,
extendParams,
on
}) {
extendParams({
creativeEffect: {
limitProgress: 1,
shadowPerProgress: false,
progressMultiplier: 1,
perspective: true,
prev: {
translate: [0, 0, 0],
rotate: [0, 0, 0],
opacity: 1,
scale: 1
},
next: {
translate: [0, 0, 0],
rotate: [0, 0, 0],
opacity: 1,
scale: 1
}
}
});
const getTranslateValue = value => {
if (typeof value === 'string') return value;
return `${value}px`;
};
const setTranslate = () => {
const {
slides,
wrapperEl,
slidesSizesGrid
} = swiper;
const params = swiper.params.creativeEffect;
const {
progressMultiplier: multiplier
} = params;
const isCenteredSlides = swiper.params.centeredSlides;
if (isCenteredSlides) {
const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
wrapperEl.style.transform = `translateX(calc(50% - ${margin}px))`;
}
for (let i = 0; i < slides.length; i += 1) {
const slideEl = slides[i];
const slideProgress = slideEl.progress;
const progress = Math.min(Math.max(slideEl.progress, -params.limitProgress), params.limitProgress);
let originalProgress = progress;
if (!isCenteredSlides) {
originalProgress = Math.min(Math.max(slideEl.originalProgress, -params.limitProgress), params.limitProgress);
}
const offset = slideEl.swiperSlideOffset;
const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
const r = [0, 0, 0];
let custom = false;
if (!swiper.isHorizontal()) {
t[1] = t[0];
t[0] = 0;
}
let data = {
translate: [0, 0, 0],
rotate: [0, 0, 0],
scale: 1,
opacity: 1
};
if (progress < 0) {
data = params.next;
custom = true;
} else if (progress > 0) {
data = params.prev;
custom = true;
}
// set translate
t.forEach((value, index) => {
t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(progress * multiplier)}))`;
});
// set rotates
r.forEach((value, index) => {
r[index] = data.rotate[index] * Math.abs(progress * multiplier);
});
slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
const translateString = t.join(', ');
const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier;
const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
// Set shadows
if (custom && data.shadow || !custom) {
let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
if (!shadowEl && data.shadow) {
shadowEl = createShadow(params, slideEl);
}
if (shadowEl) {
const shadowOpacity = params.shadowPerProgress ? progress * (1 / params.limitProgress) : progress;
shadowEl.style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);
}
}
const targetEl = effectTarget(params, slideEl);
targetEl.style.transform = transform;
targetEl.style.opacity = opacityString;
if (data.origin) {
targetEl.style.transformOrigin = data.origin;
}
}
};
const setTransition = duration => {
const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
transformElements.forEach(el => {
el.style.transitionDuration = `${duration}ms`;
el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
shadowEl.style.transitionDuration = `${duration}ms`;
});
});
effectVirtualTransitionEnd({
swiper,
duration,
transformElements,
allSlides: true
});
};
effectInit({
effect: 'creative',
swiper,
on,
setTranslate,
setTransition,
perspective: () => swiper.params.creativeEffect.perspective,
overwriteParams: () => ({
watchSlidesProgress: true,
virtualTranslate: !swiper.params.cssMode
})
});
}
+7
View File
@@ -0,0 +1,7 @@
.swiper-creative {
.swiper-slide {
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
}
+1
View File
@@ -0,0 +1 @@
.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}
+7
View File
@@ -0,0 +1,7 @@
.swiper-creative {
.swiper-slide {
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
}

Some files were not shown because too many files have changed in this diff Show More