chushihua
This commit is contained in:
BIN
Binary file not shown.
BIN
Binary file not shown.
+204
@@ -0,0 +1,204 @@
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const a11y = {
|
||||
makeElFocusable($el) {
|
||||
$el.attr('tabIndex', '0');
|
||||
return $el;
|
||||
},
|
||||
addElRole($el, role) {
|
||||
$el.attr('role', role);
|
||||
return $el;
|
||||
},
|
||||
addElLabel($el, label) {
|
||||
$el.attr('aria-label', label);
|
||||
return $el;
|
||||
},
|
||||
disableEl($el) {
|
||||
$el.attr('aria-disabled', true);
|
||||
return $el;
|
||||
},
|
||||
enableEl($el) {
|
||||
$el.attr('aria-disabled', false);
|
||||
return $el;
|
||||
},
|
||||
onEnterKey(e) {
|
||||
const swiper = this;
|
||||
const params = swiper.params.a11y;
|
||||
if (e.keyCode !== 13) return;
|
||||
const $targetEl = $(e.target);
|
||||
if (swiper.navigation && swiper.navigation.$nextEl && $targetEl.is(swiper.navigation.$nextEl)) {
|
||||
if (!(swiper.isEnd && !swiper.params.loop)) {
|
||||
swiper.slideNext();
|
||||
}
|
||||
if (swiper.isEnd) {
|
||||
swiper.a11y.notify(params.lastSlideMessage);
|
||||
} else {
|
||||
swiper.a11y.notify(params.nextSlideMessage);
|
||||
}
|
||||
}
|
||||
if (swiper.navigation && swiper.navigation.$prevEl && $targetEl.is(swiper.navigation.$prevEl)) {
|
||||
if (!(swiper.isBeginning && !swiper.params.loop)) {
|
||||
swiper.slidePrev();
|
||||
}
|
||||
if (swiper.isBeginning) {
|
||||
swiper.a11y.notify(params.firstSlideMessage);
|
||||
} else {
|
||||
swiper.a11y.notify(params.prevSlideMessage);
|
||||
}
|
||||
}
|
||||
if (swiper.pagination && $targetEl.is(`.${swiper.params.pagination.bulletClass}`)) {
|
||||
$targetEl[0].click();
|
||||
}
|
||||
},
|
||||
notify(message) {
|
||||
const swiper = this;
|
||||
const notification = swiper.a11y.liveRegion;
|
||||
if (notification.length === 0) return;
|
||||
notification.html('');
|
||||
notification.html(message);
|
||||
},
|
||||
updateNavigation() {
|
||||
const swiper = this;
|
||||
|
||||
if (swiper.params.loop) return;
|
||||
const { $nextEl, $prevEl } = swiper.navigation;
|
||||
|
||||
if ($prevEl && $prevEl.length > 0) {
|
||||
if (swiper.isBeginning) {
|
||||
swiper.a11y.disableEl($prevEl);
|
||||
} else {
|
||||
swiper.a11y.enableEl($prevEl);
|
||||
}
|
||||
}
|
||||
if ($nextEl && $nextEl.length > 0) {
|
||||
if (swiper.isEnd) {
|
||||
swiper.a11y.disableEl($nextEl);
|
||||
} else {
|
||||
swiper.a11y.enableEl($nextEl);
|
||||
}
|
||||
}
|
||||
},
|
||||
updatePagination() {
|
||||
const swiper = this;
|
||||
const params = swiper.params.a11y;
|
||||
if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) {
|
||||
swiper.pagination.bullets.each((bulletIndex, bulletEl) => {
|
||||
const $bulletEl = $(bulletEl);
|
||||
swiper.a11y.makeElFocusable($bulletEl);
|
||||
swiper.a11y.addElRole($bulletEl, 'button');
|
||||
swiper.a11y.addElLabel($bulletEl, params.paginationBulletMessage.replace(/{{index}}/, $bulletEl.index() + 1));
|
||||
});
|
||||
}
|
||||
},
|
||||
init() {
|
||||
const swiper = this;
|
||||
|
||||
swiper.$el.append(swiper.a11y.liveRegion);
|
||||
|
||||
// Navigation
|
||||
const params = swiper.params.a11y;
|
||||
let $nextEl;
|
||||
let $prevEl;
|
||||
if (swiper.navigation && swiper.navigation.$nextEl) {
|
||||
$nextEl = swiper.navigation.$nextEl;
|
||||
}
|
||||
if (swiper.navigation && swiper.navigation.$prevEl) {
|
||||
$prevEl = swiper.navigation.$prevEl;
|
||||
}
|
||||
if ($nextEl) {
|
||||
swiper.a11y.makeElFocusable($nextEl);
|
||||
swiper.a11y.addElRole($nextEl, 'button');
|
||||
swiper.a11y.addElLabel($nextEl, params.nextSlideMessage);
|
||||
$nextEl.on('keydown', swiper.a11y.onEnterKey);
|
||||
}
|
||||
if ($prevEl) {
|
||||
swiper.a11y.makeElFocusable($prevEl);
|
||||
swiper.a11y.addElRole($prevEl, 'button');
|
||||
swiper.a11y.addElLabel($prevEl, params.prevSlideMessage);
|
||||
$prevEl.on('keydown', swiper.a11y.onEnterKey);
|
||||
}
|
||||
|
||||
// Pagination
|
||||
if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) {
|
||||
swiper.pagination.$el.on('keydown', `.${swiper.params.pagination.bulletClass}`, swiper.a11y.onEnterKey);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.a11y.liveRegion && swiper.a11y.liveRegion.length > 0) swiper.a11y.liveRegion.remove();
|
||||
|
||||
let $nextEl;
|
||||
let $prevEl;
|
||||
if (swiper.navigation && swiper.navigation.$nextEl) {
|
||||
$nextEl = swiper.navigation.$nextEl;
|
||||
}
|
||||
if (swiper.navigation && swiper.navigation.$prevEl) {
|
||||
$prevEl = swiper.navigation.$prevEl;
|
||||
}
|
||||
if ($nextEl) {
|
||||
$nextEl.off('keydown', swiper.a11y.onEnterKey);
|
||||
}
|
||||
if ($prevEl) {
|
||||
$prevEl.off('keydown', swiper.a11y.onEnterKey);
|
||||
}
|
||||
|
||||
// Pagination
|
||||
if (swiper.pagination && swiper.params.pagination.clickable && swiper.pagination.bullets && swiper.pagination.bullets.length) {
|
||||
swiper.pagination.$el.off('keydown', `.${swiper.params.pagination.bulletClass}`, swiper.a11y.onEnterKey);
|
||||
}
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'a11y',
|
||||
params: {
|
||||
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}}',
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
a11y: {
|
||||
liveRegion: $(`<span class="${swiper.params.a11y.notificationClass}" aria-live="assertive" aria-atomic="true"></span>`),
|
||||
},
|
||||
});
|
||||
Object.keys(a11y).forEach((methodName) => {
|
||||
swiper.a11y[methodName] = a11y[methodName].bind(swiper);
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
swiper.a11y.init();
|
||||
swiper.a11y.updateNavigation();
|
||||
},
|
||||
toEdge() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
swiper.a11y.updateNavigation();
|
||||
},
|
||||
fromEdge() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
swiper.a11y.updateNavigation();
|
||||
},
|
||||
paginationUpdate() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
swiper.a11y.updatePagination();
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.a11y.enabled) return;
|
||||
swiper.a11y.destroy();
|
||||
},
|
||||
},
|
||||
};
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/* a11y */
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/* a11y */
|
||||
.swiper-container .swiper-notification {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
BIN
Binary file not shown.
+152
@@ -0,0 +1,152 @@
|
||||
/* eslint no-underscore-dangle: "off" */
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Autoplay = {
|
||||
run() {
|
||||
const swiper = this;
|
||||
const $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
|
||||
let delay = swiper.params.autoplay.delay;
|
||||
if ($activeSlideEl.attr('data-swiper-autoplay')) {
|
||||
delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay;
|
||||
}
|
||||
clearTimeout(swiper.autoplay.timeout);
|
||||
swiper.autoplay.timeout = Utils.nextTick(() => {
|
||||
if (swiper.params.autoplay.reverseDirection) {
|
||||
if (swiper.params.loop) {
|
||||
swiper.loopFix();
|
||||
swiper.slidePrev(swiper.params.speed, true, true);
|
||||
swiper.emit('autoplay');
|
||||
} else if (!swiper.isBeginning) {
|
||||
swiper.slidePrev(swiper.params.speed, true, true);
|
||||
swiper.emit('autoplay');
|
||||
} else if (!swiper.params.autoplay.stopOnLastSlide) {
|
||||
swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
|
||||
swiper.emit('autoplay');
|
||||
} else {
|
||||
swiper.autoplay.stop();
|
||||
}
|
||||
} else if (swiper.params.loop) {
|
||||
swiper.loopFix();
|
||||
swiper.slideNext(swiper.params.speed, true, true);
|
||||
swiper.emit('autoplay');
|
||||
} else if (!swiper.isEnd) {
|
||||
swiper.slideNext(swiper.params.speed, true, true);
|
||||
swiper.emit('autoplay');
|
||||
} else if (!swiper.params.autoplay.stopOnLastSlide) {
|
||||
swiper.slideTo(0, swiper.params.speed, true, true);
|
||||
swiper.emit('autoplay');
|
||||
} else {
|
||||
swiper.autoplay.stop();
|
||||
}
|
||||
}, delay);
|
||||
},
|
||||
start() {
|
||||
const swiper = this;
|
||||
if (typeof swiper.autoplay.timeout !== 'undefined') return false;
|
||||
if (swiper.autoplay.running) return false;
|
||||
swiper.autoplay.running = true;
|
||||
swiper.emit('autoplayStart');
|
||||
swiper.autoplay.run();
|
||||
return true;
|
||||
},
|
||||
stop() {
|
||||
const swiper = this;
|
||||
if (!swiper.autoplay.running) return false;
|
||||
if (typeof swiper.autoplay.timeout === 'undefined') return false;
|
||||
|
||||
if (swiper.autoplay.timeout) {
|
||||
clearTimeout(swiper.autoplay.timeout);
|
||||
swiper.autoplay.timeout = undefined;
|
||||
}
|
||||
swiper.autoplay.running = false;
|
||||
swiper.emit('autoplayStop');
|
||||
return true;
|
||||
},
|
||||
pause(speed) {
|
||||
const swiper = this;
|
||||
if (!swiper.autoplay.running) return;
|
||||
if (swiper.autoplay.paused) return;
|
||||
if (swiper.autoplay.timeout) clearTimeout(swiper.autoplay.timeout);
|
||||
swiper.autoplay.paused = true;
|
||||
if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
|
||||
swiper.autoplay.paused = false;
|
||||
swiper.autoplay.run();
|
||||
} else {
|
||||
swiper.$wrapperEl[0].addEventListener('transitionend', swiper.autoplay.onTransitionEnd);
|
||||
swiper.$wrapperEl[0].addEventListener('webkitTransitionEnd', swiper.autoplay.onTransitionEnd);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'autoplay',
|
||||
params: {
|
||||
autoplay: {
|
||||
enabled: false,
|
||||
delay: 3000,
|
||||
waitForTransition: true,
|
||||
disableOnInteraction: true,
|
||||
stopOnLastSlide: false,
|
||||
reverseDirection: false,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
autoplay: {
|
||||
running: false,
|
||||
paused: false,
|
||||
run: Autoplay.run.bind(swiper),
|
||||
start: Autoplay.start.bind(swiper),
|
||||
stop: Autoplay.stop.bind(swiper),
|
||||
pause: Autoplay.pause.bind(swiper),
|
||||
onTransitionEnd(e) {
|
||||
if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
|
||||
if (e.target !== this) return;
|
||||
swiper.$wrapperEl[0].removeEventListener('transitionend', swiper.autoplay.onTransitionEnd);
|
||||
swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.autoplay.onTransitionEnd);
|
||||
swiper.autoplay.paused = false;
|
||||
if (!swiper.autoplay.running) {
|
||||
swiper.autoplay.stop();
|
||||
} else {
|
||||
swiper.autoplay.run();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.params.autoplay.enabled) {
|
||||
swiper.autoplay.start();
|
||||
}
|
||||
},
|
||||
beforeTransitionStart(speed, internal) {
|
||||
const swiper = this;
|
||||
if (swiper.autoplay.running) {
|
||||
if (internal || !swiper.params.autoplay.disableOnInteraction) {
|
||||
swiper.autoplay.pause(speed);
|
||||
} else {
|
||||
swiper.autoplay.stop();
|
||||
}
|
||||
}
|
||||
},
|
||||
sliderFirstMove() {
|
||||
const swiper = this;
|
||||
if (swiper.autoplay.running) {
|
||||
if (swiper.params.autoplay.disableOnInteraction) {
|
||||
swiper.autoplay.stop();
|
||||
} else {
|
||||
swiper.autoplay.pause();
|
||||
}
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.autoplay.running) {
|
||||
swiper.autoplay.stop();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
+186
@@ -0,0 +1,186 @@
|
||||
/* eslint no-bitwise: ["error", { "allow": [">>"] }] */
|
||||
import Swiper from '../core/core-class';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Controller = {
|
||||
LinearSpline: 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 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + 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
|
||||
getInterpolateFunction(c) {
|
||||
const swiper = this;
|
||||
if (!swiper.controller.spline) {
|
||||
swiper.controller.spline = swiper.params.loop
|
||||
? new Controller.LinearSpline(swiper.slidesGrid, c.slidesGrid)
|
||||
: new Controller.LinearSpline(swiper.snapGrid, c.snapGrid);
|
||||
}
|
||||
},
|
||||
setTranslate(setTranslate, byController) {
|
||||
const swiper = this;
|
||||
const controlled = swiper.controller.control;
|
||||
let multiplier;
|
||||
let controlledTranslate;
|
||||
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') {
|
||||
swiper.controller.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);
|
||||
}
|
||||
},
|
||||
setTransition(duration, byController) {
|
||||
const swiper = this;
|
||||
const controlled = swiper.controller.control;
|
||||
let i;
|
||||
function setControlledTransition(c) {
|
||||
c.setTransition(duration, swiper);
|
||||
if (duration !== 0) {
|
||||
c.transitionStart();
|
||||
if (c.params.autoHeight) {
|
||||
Utils.nextTick(() => {
|
||||
c.updateAutoHeight();
|
||||
});
|
||||
}
|
||||
c.$wrapperEl.transitionEnd(() => {
|
||||
if (!controlled) return;
|
||||
if (c.params.loop && swiper.params.controller.by === 'slide') {
|
||||
c.loopFix();
|
||||
}
|
||||
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);
|
||||
}
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'controller',
|
||||
params: {
|
||||
controller: {
|
||||
control: undefined,
|
||||
inverse: false,
|
||||
by: 'slide', // or 'container'
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
controller: {
|
||||
control: swiper.params.controller.control,
|
||||
getInterpolateFunction: Controller.getInterpolateFunction.bind(swiper),
|
||||
setTranslate: Controller.setTranslate.bind(swiper),
|
||||
setTransition: Controller.setTransition.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
update() {
|
||||
const swiper = this;
|
||||
if (!swiper.controller.control) return;
|
||||
if (swiper.controller.spline) {
|
||||
swiper.controller.spline = undefined;
|
||||
delete swiper.controller.spline;
|
||||
}
|
||||
},
|
||||
resize() {
|
||||
const swiper = this;
|
||||
if (!swiper.controller.control) return;
|
||||
if (swiper.controller.spline) {
|
||||
swiper.controller.spline = undefined;
|
||||
delete swiper.controller.spline;
|
||||
}
|
||||
},
|
||||
observerUpdate() {
|
||||
const swiper = this;
|
||||
if (!swiper.controller.control) return;
|
||||
if (swiper.controller.spline) {
|
||||
swiper.controller.spline = undefined;
|
||||
delete swiper.controller.spline;
|
||||
}
|
||||
},
|
||||
setTranslate(translate, byController) {
|
||||
const swiper = this;
|
||||
if (!swiper.controller.control) return;
|
||||
swiper.controller.setTranslate(translate, byController);
|
||||
},
|
||||
setTransition(duration, byController) {
|
||||
const swiper = this;
|
||||
if (!swiper.controller.control) return;
|
||||
swiper.controller.setTransition(duration, byController);
|
||||
},
|
||||
},
|
||||
};
|
||||
BIN
Binary file not shown.
+24
@@ -0,0 +1,24 @@
|
||||
import { window } from 'ssr-window';
|
||||
|
||||
export default function (breakpoints) {
|
||||
const swiper = this;
|
||||
// Get breakpoint for window width
|
||||
if (!breakpoints) return undefined;
|
||||
let breakpoint = false;
|
||||
const points = [];
|
||||
Object.keys(breakpoints).forEach((point) => {
|
||||
points.push(point);
|
||||
});
|
||||
points.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
|
||||
for (let i = 0; i < points.length; i += 1) {
|
||||
const point = points[i];
|
||||
if (swiper.params.breakpointsInverse) {
|
||||
if (point <= window.innerWidth) {
|
||||
breakpoint = point;
|
||||
}
|
||||
} else if (point >= window.innerWidth && !breakpoint) {
|
||||
breakpoint = point;
|
||||
}
|
||||
}
|
||||
return breakpoint || 'max';
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import setBreakpoint from './setBreakpoint';
|
||||
import getBreakpoint from './getBreakpoint';
|
||||
|
||||
export default { setBreakpoint, getBreakpoint };
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const {
|
||||
activeIndex, initialized, loopedSlides = 0, params,
|
||||
} = swiper;
|
||||
const breakpoints = params.breakpoints;
|
||||
if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;
|
||||
|
||||
// Set breakpoint for window width and update parameters
|
||||
const breakpoint = swiper.getBreakpoint(breakpoints);
|
||||
|
||||
if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
|
||||
const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
|
||||
if (breakpointOnlyParams) {
|
||||
['slidesPerView', 'spaceBetween', 'slidesPerGroup'].forEach((param) => {
|
||||
const paramValue = breakpointOnlyParams[param];
|
||||
if (typeof paramValue === 'undefined') return;
|
||||
if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {
|
||||
breakpointOnlyParams[param] = 'auto';
|
||||
} else if (param === 'slidesPerView') {
|
||||
breakpointOnlyParams[param] = parseFloat(paramValue);
|
||||
} else {
|
||||
breakpointOnlyParams[param] = parseInt(paramValue, 10);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const breakpointParams = breakpointOnlyParams || swiper.originalParams;
|
||||
const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
|
||||
const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
|
||||
|
||||
if (directionChanged && initialized) {
|
||||
swiper.changeDirection();
|
||||
}
|
||||
|
||||
Utils.extend(swiper.params, breakpointParams);
|
||||
|
||||
Utils.extend(swiper, {
|
||||
allowTouchMove: swiper.params.allowTouchMove,
|
||||
allowSlideNext: swiper.params.allowSlideNext,
|
||||
allowSlidePrev: swiper.params.allowSlidePrev,
|
||||
});
|
||||
|
||||
swiper.currentBreakpoint = breakpoint;
|
||||
|
||||
if (needsReLoop && initialized) {
|
||||
swiper.loopDestroy();
|
||||
swiper.loopCreate();
|
||||
swiper.updateSlides();
|
||||
swiper.slideTo((activeIndex - loopedSlides) + swiper.loopedSlides, 0, false);
|
||||
}
|
||||
|
||||
swiper.emit('breakpoint', breakpointParams);
|
||||
}
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
|
||||
function checkOverflow() {
|
||||
const swiper = this;
|
||||
const wasLocked = swiper.isLocked;
|
||||
|
||||
swiper.isLocked = swiper.snapGrid.length === 1;
|
||||
swiper.allowSlideNext = !swiper.isLocked;
|
||||
swiper.allowSlidePrev = !swiper.isLocked;
|
||||
|
||||
// events
|
||||
if (wasLocked !== swiper.isLocked) swiper.emit(swiper.isLocked ? 'lock' : 'unlock');
|
||||
|
||||
if (wasLocked && wasLocked !== swiper.isLocked) {
|
||||
swiper.isEnd = false;
|
||||
swiper.navigation.update();
|
||||
}
|
||||
}
|
||||
|
||||
export default { checkOverflow };
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
import Support from '../../../utils/support';
|
||||
import Device from '../../../utils/device';
|
||||
import Browser from '../../../utils/browser';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const {
|
||||
classNames, params, rtl, $el,
|
||||
} = swiper;
|
||||
const suffixes = [];
|
||||
|
||||
suffixes.push('initialized');
|
||||
suffixes.push(params.direction);
|
||||
|
||||
if (params.freeMode) {
|
||||
suffixes.push('free-mode');
|
||||
}
|
||||
if (!Support.flexbox) {
|
||||
suffixes.push('no-flexbox');
|
||||
}
|
||||
if (params.autoHeight) {
|
||||
suffixes.push('autoheight');
|
||||
}
|
||||
if (rtl) {
|
||||
suffixes.push('rtl');
|
||||
}
|
||||
if (params.slidesPerColumn > 1) {
|
||||
suffixes.push('multirow');
|
||||
}
|
||||
if (Device.android) {
|
||||
suffixes.push('android');
|
||||
}
|
||||
if (Device.ios) {
|
||||
suffixes.push('ios');
|
||||
}
|
||||
// WP8 Touch Events Fix
|
||||
if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) {
|
||||
suffixes.push(`wp8-${params.direction}`);
|
||||
}
|
||||
|
||||
suffixes.forEach((suffix) => {
|
||||
classNames.push(params.containerModifierClass + suffix);
|
||||
});
|
||||
|
||||
$el.addClass(classNames.join(' '));
|
||||
}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import addClasses from './addClasses';
|
||||
import removeClasses from './removeClasses';
|
||||
|
||||
export default { addClasses, removeClasses };
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const { $el, classNames } = swiper;
|
||||
|
||||
$el.removeClass(classNames.join(' '));
|
||||
}
|
||||
+492
@@ -0,0 +1,492 @@
|
||||
/* eslint no-param-reassign: "off" */
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
import Support from '../../utils/support';
|
||||
import Browser from '../../utils/browser';
|
||||
|
||||
import SwiperClass from '../../utils/class';
|
||||
|
||||
import update from './update/index';
|
||||
import translate from './translate/index';
|
||||
import transition from './transition/index';
|
||||
import slide from './slide/index';
|
||||
import loop from './loop/index';
|
||||
import grabCursor from './grab-cursor/index';
|
||||
import manipulation from './manipulation/index';
|
||||
import events from './events/index';
|
||||
import breakpoints from './breakpoints/index';
|
||||
import classes from './classes/index';
|
||||
import images from './images/index';
|
||||
import checkOverflow from './check-overflow/index';
|
||||
|
||||
import defaults from './defaults';
|
||||
|
||||
const prototypes = {
|
||||
update,
|
||||
translate,
|
||||
transition,
|
||||
slide,
|
||||
loop,
|
||||
grabCursor,
|
||||
manipulation,
|
||||
events,
|
||||
breakpoints,
|
||||
checkOverflow,
|
||||
classes,
|
||||
images,
|
||||
};
|
||||
|
||||
const extendedDefaults = {};
|
||||
|
||||
class Swiper extends SwiperClass {
|
||||
constructor(...args) {
|
||||
let el;
|
||||
let params;
|
||||
if (args.length === 1 && args[0].constructor && args[0].constructor === Object) {
|
||||
params = args[0];
|
||||
} else {
|
||||
[el, params] = args;
|
||||
}
|
||||
if (!params) params = {};
|
||||
|
||||
params = Utils.extend({}, params);
|
||||
if (el && !params.el) params.el = el;
|
||||
|
||||
super(params);
|
||||
|
||||
Object.keys(prototypes).forEach((prototypeGroup) => {
|
||||
Object.keys(prototypes[prototypeGroup]).forEach((protoMethod) => {
|
||||
if (!Swiper.prototype[protoMethod]) {
|
||||
Swiper.prototype[protoMethod] = prototypes[prototypeGroup][protoMethod];
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Swiper Instance
|
||||
const swiper = this;
|
||||
if (typeof swiper.modules === 'undefined') {
|
||||
swiper.modules = {};
|
||||
}
|
||||
Object.keys(swiper.modules).forEach((moduleName) => {
|
||||
const module = swiper.modules[moduleName];
|
||||
if (module.params) {
|
||||
const moduleParamName = Object.keys(module.params)[0];
|
||||
const moduleParams = module.params[moduleParamName];
|
||||
if (typeof moduleParams !== 'object' || moduleParams === null) return;
|
||||
if (!(moduleParamName in params && 'enabled' in moduleParams)) 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 defaults with modules params
|
||||
const swiperParams = Utils.extend({}, defaults);
|
||||
swiper.useModulesParams(swiperParams);
|
||||
|
||||
// Extend defaults with passed params
|
||||
swiper.params = Utils.extend({}, swiperParams, extendedDefaults, params);
|
||||
swiper.originalParams = Utils.extend({}, swiper.params);
|
||||
swiper.passedParams = Utils.extend({}, params);
|
||||
|
||||
// Save Dom lib
|
||||
swiper.$ = $;
|
||||
|
||||
// Find el
|
||||
const $el = $(swiper.params.el);
|
||||
el = $el[0];
|
||||
|
||||
if (!el) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if ($el.length > 1) {
|
||||
const swipers = [];
|
||||
$el.each((index, containerEl) => {
|
||||
const newParams = Utils.extend({}, params, { el: containerEl });
|
||||
swipers.push(new Swiper(newParams));
|
||||
});
|
||||
return swipers;
|
||||
}
|
||||
|
||||
el.swiper = swiper;
|
||||
$el.data('swiper', swiper);
|
||||
|
||||
// Find Wrapper
|
||||
const $wrapperEl = $el.children(`.${swiper.params.wrapperClass}`);
|
||||
|
||||
// Extend Swiper
|
||||
Utils.extend(swiper, {
|
||||
$el,
|
||||
el,
|
||||
$wrapperEl,
|
||||
wrapperEl: $wrapperEl[0],
|
||||
|
||||
// Classes
|
||||
classNames: [],
|
||||
|
||||
// Slides
|
||||
slides: $(),
|
||||
slidesGrid: [],
|
||||
snapGrid: [],
|
||||
slidesSizesGrid: [],
|
||||
|
||||
// isDirection
|
||||
isHorizontal() {
|
||||
return swiper.params.direction === 'horizontal';
|
||||
},
|
||||
isVertical() {
|
||||
return swiper.params.direction === 'vertical';
|
||||
},
|
||||
// RTL
|
||||
rtl: (el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl'),
|
||||
rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || $el.css('direction') === 'rtl'),
|
||||
wrongRTL: $wrapperEl.css('display') === '-webkit-box',
|
||||
|
||||
// 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
|
||||
touchEvents: (function touchEvents() {
|
||||
const touch = ['touchstart', 'touchmove', 'touchend'];
|
||||
let desktop = ['mousedown', 'mousemove', 'mouseup'];
|
||||
if (Support.pointerEvents) {
|
||||
desktop = ['pointerdown', 'pointermove', 'pointerup'];
|
||||
} else if (Support.prefixedPointerEvents) {
|
||||
desktop = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp'];
|
||||
}
|
||||
swiper.touchEventsTouch = {
|
||||
start: touch[0],
|
||||
move: touch[1],
|
||||
end: touch[2],
|
||||
};
|
||||
swiper.touchEventsDesktop = {
|
||||
start: desktop[0],
|
||||
move: desktop[1],
|
||||
end: desktop[2],
|
||||
};
|
||||
return Support.touch || !swiper.params.simulateTouch ? swiper.touchEventsTouch : swiper.touchEventsDesktop;
|
||||
}()),
|
||||
touchEventsData: {
|
||||
isTouched: undefined,
|
||||
isMoved: undefined,
|
||||
allowTouchCallbacks: undefined,
|
||||
touchStartTime: undefined,
|
||||
isScrolling: undefined,
|
||||
currentTranslate: undefined,
|
||||
startTranslate: undefined,
|
||||
allowThresholdMove: undefined,
|
||||
// Form elements to match
|
||||
formElements: 'input, select, option, textarea, button, video',
|
||||
// Last click time
|
||||
lastClickTime: Utils.now(),
|
||||
clickTimeout: undefined,
|
||||
// Velocities
|
||||
velocities: [],
|
||||
allowMomentumBounce: undefined,
|
||||
isTouchEvent: undefined,
|
||||
startMoving: undefined,
|
||||
},
|
||||
|
||||
// Clicks
|
||||
allowClick: true,
|
||||
|
||||
// Touches
|
||||
allowTouchMove: swiper.params.allowTouchMove,
|
||||
|
||||
touches: {
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
currentX: 0,
|
||||
currentY: 0,
|
||||
diff: 0,
|
||||
},
|
||||
|
||||
// Images
|
||||
imagesToLoad: [],
|
||||
imagesLoaded: 0,
|
||||
|
||||
});
|
||||
|
||||
// Install Modules
|
||||
swiper.useModules();
|
||||
|
||||
// Init
|
||||
if (swiper.params.init) {
|
||||
swiper.init();
|
||||
}
|
||||
|
||||
// Return app instance
|
||||
return swiper;
|
||||
}
|
||||
|
||||
slidesPerViewDynamic() {
|
||||
const swiper = this;
|
||||
const {
|
||||
params, slides, slidesGrid, 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 {
|
||||
for (let i = activeIndex + 1; i < slides.length; i += 1) {
|
||||
if (slidesGrid[i] - slidesGrid[activeIndex] < swiperSize) {
|
||||
spv += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return spv;
|
||||
}
|
||||
|
||||
update() {
|
||||
const swiper = this;
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
const { snapGrid, params } = swiper;
|
||||
// Breakpoints
|
||||
if (params.breakpoints) {
|
||||
swiper.setBreakpoint();
|
||||
}
|
||||
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) {
|
||||
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
|
||||
.removeClass(`${swiper.params.containerModifierClass}${currentDirection} wp8-${currentDirection}`)
|
||||
.addClass(`${swiper.params.containerModifierClass}${newDirection}`);
|
||||
|
||||
if ((Browser.isIE || Browser.isEdge) && (Support.pointerEvents || Support.prefixedPointerEvents)) {
|
||||
swiper.$el.addClass(`${swiper.params.containerModifierClass}wp8-${newDirection}`);
|
||||
}
|
||||
|
||||
swiper.params.direction = newDirection;
|
||||
|
||||
swiper.slides.each((slideIndex, slideEl) => {
|
||||
if (newDirection === 'vertical') {
|
||||
slideEl.style.width = '';
|
||||
} else {
|
||||
slideEl.style.height = '';
|
||||
}
|
||||
});
|
||||
|
||||
swiper.emit('changeDirection');
|
||||
if (needUpdate) swiper.update();
|
||||
|
||||
return swiper;
|
||||
}
|
||||
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.initialized) return;
|
||||
|
||||
swiper.emit('beforeInit');
|
||||
|
||||
// Set breakpoint
|
||||
if (swiper.params.breakpoints) {
|
||||
swiper.setBreakpoint();
|
||||
}
|
||||
|
||||
// Add Classes
|
||||
swiper.addClasses();
|
||||
|
||||
// Create loop
|
||||
if (swiper.params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
|
||||
// Update size
|
||||
swiper.updateSize();
|
||||
|
||||
// Update slides
|
||||
swiper.updateSlides();
|
||||
|
||||
if (swiper.params.watchOverflow) {
|
||||
swiper.checkOverflow();
|
||||
}
|
||||
|
||||
// Set Grab Cursor
|
||||
if (swiper.params.grabCursor) {
|
||||
swiper.setGrabCursor();
|
||||
}
|
||||
|
||||
if (swiper.params.preloadImages) {
|
||||
swiper.preloadImages();
|
||||
}
|
||||
|
||||
// Slide To Initial Slide
|
||||
if (swiper.params.loop) {
|
||||
swiper.slideTo(swiper.params.initialSlide + swiper.loopedSlides, 0, swiper.params.runCallbacksOnInit);
|
||||
} else {
|
||||
swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit);
|
||||
}
|
||||
|
||||
// Attach events
|
||||
swiper.attachEvents();
|
||||
|
||||
// Init Flag
|
||||
swiper.initialized = true;
|
||||
|
||||
// Emit
|
||||
swiper.emit('init');
|
||||
}
|
||||
|
||||
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.removeAttr('style');
|
||||
$wrapperEl.removeAttr('style');
|
||||
if (slides && slides.length) {
|
||||
slides
|
||||
.removeClass([
|
||||
params.slideVisibleClass,
|
||||
params.slideActiveClass,
|
||||
params.slideNextClass,
|
||||
params.slidePrevClass,
|
||||
].join(' '))
|
||||
.removeAttr('style')
|
||||
.removeAttr('data-swiper-slide-index')
|
||||
.removeAttr('data-swiper-column')
|
||||
.removeAttr('data-swiper-row');
|
||||
}
|
||||
}
|
||||
|
||||
swiper.emit('destroy');
|
||||
|
||||
// Detach emitter events
|
||||
Object.keys(swiper.eventsListeners).forEach((eventName) => {
|
||||
swiper.off(eventName);
|
||||
});
|
||||
|
||||
if (deleteInstance !== false) {
|
||||
swiper.$el[0].swiper = null;
|
||||
swiper.$el.data('swiper', null);
|
||||
Utils.deleteProps(swiper);
|
||||
}
|
||||
swiper.destroyed = true;
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
static extendDefaults(newDefaults) {
|
||||
Utils.extend(extendedDefaults, newDefaults);
|
||||
}
|
||||
|
||||
static get extendedDefaults() {
|
||||
return extendedDefaults;
|
||||
}
|
||||
|
||||
static get defaults() {
|
||||
return defaults;
|
||||
}
|
||||
|
||||
static get Class() {
|
||||
return SwiperClass;
|
||||
}
|
||||
|
||||
static get $() {
|
||||
return $;
|
||||
}
|
||||
}
|
||||
|
||||
export default Swiper;
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
.swiper-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
/* Fix of Webkit flickering */
|
||||
z-index:1;
|
||||
}
|
||||
.swiper-container-no-flexbox {
|
||||
.swiper-slide {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
transition-property:transform;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.swiper-container-android .swiper-slide, .swiper-wrapper {
|
||||
transform:translate3d(0px,0,0);
|
||||
}
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.swiper-container-free-mode > .swiper-wrapper {
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition-property: transform;
|
||||
}
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility: hidden;
|
||||
}
|
||||
/* Auto Height */
|
||||
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
.swiper-container-autoheight .swiper-wrapper {
|
||||
align-items: flex-start;
|
||||
transition-property: transform, height;
|
||||
}
|
||||
|
||||
/* 3D Effects */
|
||||
.swiper-container-3d {
|
||||
perspective: 1200px;
|
||||
.swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-slide-shadow-left {
|
||||
background-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
.swiper-slide-shadow-right {
|
||||
background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
.swiper-slide-shadow-top {
|
||||
background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
.swiper-slide-shadow-bottom {
|
||||
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
}
|
||||
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
|
||||
touch-action: pan-x;
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
.swiper-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
/* Fix of Webkit flickering */
|
||||
z-index:1;
|
||||
}
|
||||
.swiper-container-no-flexbox {
|
||||
.swiper-slide {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.swiper-container-vertical > .swiper-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
transition-property:transform;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.swiper-container-android .swiper-slide,
|
||||
.swiper-wrapper {
|
||||
transform:translate3d(0px,0,0);
|
||||
}
|
||||
.swiper-container-multirow > .swiper-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.swiper-container-free-mode > .swiper-wrapper {
|
||||
transition-timing-function: ease-out;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.swiper-slide {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition-property: transform;
|
||||
}
|
||||
.swiper-slide-invisible-blank {
|
||||
visibility: hidden;
|
||||
}
|
||||
/* Auto Height */
|
||||
.swiper-container-autoheight {
|
||||
&, .swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
align-items: flex-start;
|
||||
transition-property: transform, height;
|
||||
}
|
||||
}
|
||||
|
||||
/* 3D Effects */
|
||||
.swiper-container-3d {
|
||||
perspective: 1200px;
|
||||
.swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
.swiper-slide-shadow-left {
|
||||
background-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
.swiper-slide-shadow-right {
|
||||
background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
.swiper-slide-shadow-top {
|
||||
background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
.swiper-slide-shadow-bottom {
|
||||
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
|
||||
}
|
||||
}
|
||||
|
||||
/* IE10 Windows Phone 8 Fixes */
|
||||
.swiper-container-wp8-horizontal {
|
||||
&, & > .swiper-wrapper {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
}
|
||||
.swiper-container-wp8-vertical {
|
||||
&, & > .swiper-wrapper {
|
||||
touch-action: pan-x;
|
||||
}
|
||||
}
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
export default {
|
||||
init: true,
|
||||
direction: 'horizontal',
|
||||
touchEventsTarget: 'container',
|
||||
initialSlide: 0,
|
||||
speed: 300,
|
||||
//
|
||||
preventInteractionOnTransition: false,
|
||||
|
||||
// To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView).
|
||||
edgeSwipeDetection: false,
|
||||
edgeSwipeThreshold: 20,
|
||||
|
||||
// Free mode
|
||||
freeMode: false,
|
||||
freeModeMomentum: true,
|
||||
freeModeMomentumRatio: 1,
|
||||
freeModeMomentumBounce: true,
|
||||
freeModeMomentumBounceRatio: 1,
|
||||
freeModeMomentumVelocityRatio: 1,
|
||||
freeModeSticky: false,
|
||||
freeModeMinimumVelocity: 0.02,
|
||||
|
||||
// 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,
|
||||
breakpointsInverse: false,
|
||||
|
||||
// Slides grid
|
||||
spaceBetween: 0,
|
||||
slidesPerView: 1,
|
||||
slidesPerColumn: 1,
|
||||
slidesPerColumnFill: 'column',
|
||||
slidesPerGroup: 1,
|
||||
centeredSlides: false,
|
||||
slidesOffsetBefore: 0, // in px
|
||||
slidesOffsetAfter: 0, // in px
|
||||
normalizeSlideIndex: true,
|
||||
centerInsufficientSlides: false,
|
||||
|
||||
// Disable swiper and hide navigation when container not overflow
|
||||
watchOverflow: false,
|
||||
|
||||
// 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: 0,
|
||||
touchMoveStopPropagation: true,
|
||||
touchStartPreventDefault: true,
|
||||
touchStartForcePreventDefault: false,
|
||||
touchReleaseOnEdges: false,
|
||||
|
||||
// Unique Navigation Elements
|
||||
uniqueNavElements: true,
|
||||
|
||||
// Resistance
|
||||
resistance: true,
|
||||
resistanceRatio: 0.85,
|
||||
|
||||
// Progress
|
||||
watchSlidesProgress: false,
|
||||
watchSlidesVisibility: false,
|
||||
|
||||
// Cursor
|
||||
grabCursor: false,
|
||||
|
||||
// Clicks
|
||||
preventClicks: true,
|
||||
preventClicksPropagation: true,
|
||||
slideToClickedSlide: false,
|
||||
|
||||
// Images
|
||||
preloadImages: true,
|
||||
updateOnImagesReady: true,
|
||||
|
||||
// loop
|
||||
loop: false,
|
||||
loopAdditionalSlides: 0,
|
||||
loopedSlides: null,
|
||||
loopFillGroupWithBlank: false,
|
||||
|
||||
// Swiping/no swiping
|
||||
allowSlidePrev: true,
|
||||
allowSlideNext: true,
|
||||
swipeHandler: null, // '.swipe-handler',
|
||||
noSwiping: true,
|
||||
noSwipingClass: 'swiper-no-swiping',
|
||||
noSwipingSelector: null,
|
||||
|
||||
// Passive Listeners
|
||||
passiveListeners: true,
|
||||
|
||||
// NS
|
||||
containerModifierClass: 'swiper-container-', // NEW
|
||||
slideClass: 'swiper-slide',
|
||||
slideBlankClass: 'swiper-slide-invisible-blank',
|
||||
slideActiveClass: 'swiper-slide-active',
|
||||
slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
|
||||
slideVisibleClass: 'swiper-slide-visible',
|
||||
slideDuplicateClass: 'swiper-slide-duplicate',
|
||||
slideNextClass: 'swiper-slide-next',
|
||||
slideDuplicateNextClass: 'swiper-slide-duplicate-next',
|
||||
slidePrevClass: 'swiper-slide-prev',
|
||||
slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
|
||||
wrapperClass: 'swiper-wrapper',
|
||||
|
||||
// Callbacks
|
||||
runCallbacksOnInit: true,
|
||||
};
|
||||
BIN
Binary file not shown.
+103
@@ -0,0 +1,103 @@
|
||||
import { document } from 'ssr-window';
|
||||
import Device from '../../../utils/device';
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
import onTouchStart from './onTouchStart';
|
||||
import onTouchMove from './onTouchMove';
|
||||
import onTouchEnd from './onTouchEnd';
|
||||
import onResize from './onResize';
|
||||
import onClick from './onClick';
|
||||
|
||||
function attachEvents() {
|
||||
const swiper = this;
|
||||
const {
|
||||
params, touchEvents, el, wrapperEl,
|
||||
} = swiper;
|
||||
|
||||
if (process.env.TARGET !== 'desktop') {
|
||||
swiper.onTouchStart = onTouchStart.bind(swiper);
|
||||
swiper.onTouchMove = onTouchMove.bind(swiper);
|
||||
swiper.onTouchEnd = onTouchEnd.bind(swiper);
|
||||
}
|
||||
|
||||
swiper.onClick = onClick.bind(swiper);
|
||||
|
||||
const target = params.touchEventsTarget === 'container' ? el : wrapperEl;
|
||||
const capture = !!params.nested;
|
||||
|
||||
// Touch Events
|
||||
if (process.env.TARGET !== 'desktop') {
|
||||
if (!Support.touch && (Support.pointerEvents || Support.prefixedPointerEvents)) {
|
||||
target.addEventListener(touchEvents.start, swiper.onTouchStart, false);
|
||||
document.addEventListener(touchEvents.move, swiper.onTouchMove, capture);
|
||||
document.addEventListener(touchEvents.end, swiper.onTouchEnd, false);
|
||||
} else {
|
||||
if (Support.touch) {
|
||||
const passiveListener = touchEvents.start === 'touchstart' && Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false;
|
||||
target.addEventListener(touchEvents.start, swiper.onTouchStart, passiveListener);
|
||||
target.addEventListener(touchEvents.move, swiper.onTouchMove, Support.passiveListener ? { passive: false, capture } : capture);
|
||||
target.addEventListener(touchEvents.end, swiper.onTouchEnd, passiveListener);
|
||||
}
|
||||
if ((params.simulateTouch && !Device.ios && !Device.android) || (params.simulateTouch && !Support.touch && Device.ios)) {
|
||||
target.addEventListener('mousedown', swiper.onTouchStart, false);
|
||||
document.addEventListener('mousemove', swiper.onTouchMove, capture);
|
||||
document.addEventListener('mouseup', swiper.onTouchEnd, false);
|
||||
}
|
||||
}
|
||||
// Prevent Links Clicks
|
||||
if (params.preventClicks || params.preventClicksPropagation) {
|
||||
target.addEventListener('click', swiper.onClick, true);
|
||||
}
|
||||
} else {
|
||||
target.addEventListener('click', swiper.onClick, false);
|
||||
}
|
||||
|
||||
// Resize handler
|
||||
swiper.on((Device.ios || Device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate'), onResize, true);
|
||||
}
|
||||
|
||||
function detachEvents() {
|
||||
const swiper = this;
|
||||
|
||||
const {
|
||||
params, touchEvents, el, wrapperEl,
|
||||
} = swiper;
|
||||
|
||||
const target = params.touchEventsTarget === 'container' ? el : wrapperEl;
|
||||
const capture = !!params.nested;
|
||||
|
||||
// Touch Events
|
||||
if (process.env.TARGET !== 'desktop') {
|
||||
if (!Support.touch && (Support.pointerEvents || Support.prefixedPointerEvents)) {
|
||||
target.removeEventListener(touchEvents.start, swiper.onTouchStart, false);
|
||||
document.removeEventListener(touchEvents.move, swiper.onTouchMove, capture);
|
||||
document.removeEventListener(touchEvents.end, swiper.onTouchEnd, false);
|
||||
} else {
|
||||
if (Support.touch) {
|
||||
const passiveListener = touchEvents.start === 'onTouchStart' && Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false;
|
||||
target.removeEventListener(touchEvents.start, swiper.onTouchStart, passiveListener);
|
||||
target.removeEventListener(touchEvents.move, swiper.onTouchMove, capture);
|
||||
target.removeEventListener(touchEvents.end, swiper.onTouchEnd, passiveListener);
|
||||
}
|
||||
if ((params.simulateTouch && !Device.ios && !Device.android) || (params.simulateTouch && !Support.touch && Device.ios)) {
|
||||
target.removeEventListener('mousedown', swiper.onTouchStart, false);
|
||||
document.removeEventListener('mousemove', swiper.onTouchMove, capture);
|
||||
document.removeEventListener('mouseup', swiper.onTouchEnd, false);
|
||||
}
|
||||
}
|
||||
// Prevent Links Clicks
|
||||
if (params.preventClicks || params.preventClicksPropagation) {
|
||||
target.removeEventListener('click', swiper.onClick, true);
|
||||
}
|
||||
} else {
|
||||
target.removeEventListener('click', swiper.onClick, true);
|
||||
}
|
||||
|
||||
// Resize handler
|
||||
swiper.off((Device.ios || Device.android ? 'resize orientationchange observerUpdate' : 'resize observerUpdate'), onResize);
|
||||
}
|
||||
|
||||
export default {
|
||||
attachEvents,
|
||||
detachEvents,
|
||||
};
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
export default function (e) {
|
||||
const swiper = this;
|
||||
if (process.env.TARGET === 'desktop') {
|
||||
swiper.emit('tap click', e);
|
||||
} else if (!swiper.allowClick) {
|
||||
if (swiper.params.preventClicks) e.preventDefault();
|
||||
if (swiper.params.preventClicksPropagation && swiper.animating) {
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
export default function () {
|
||||
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;
|
||||
|
||||
// Disable locks on resize
|
||||
swiper.allowSlideNext = true;
|
||||
swiper.allowSlidePrev = true;
|
||||
|
||||
swiper.updateSize();
|
||||
swiper.updateSlides();
|
||||
|
||||
if (params.freeMode) {
|
||||
const newTranslate = Math.min(Math.max(swiper.translate, swiper.maxTranslate()), swiper.minTranslate());
|
||||
swiper.setTranslate(newTranslate);
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
|
||||
if (params.autoHeight) {
|
||||
swiper.updateAutoHeight();
|
||||
}
|
||||
} else {
|
||||
swiper.updateSlidesClasses();
|
||||
if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.params.centeredSlides) {
|
||||
swiper.slideTo(swiper.slides.length - 1, 0, false, true);
|
||||
} else {
|
||||
swiper.slideTo(swiper.activeIndex, 0, false, true);
|
||||
}
|
||||
}
|
||||
if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
|
||||
swiper.autoplay.run();
|
||||
}
|
||||
// Return locks after resize
|
||||
swiper.allowSlidePrev = allowSlidePrev;
|
||||
swiper.allowSlideNext = allowSlideNext;
|
||||
|
||||
if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) {
|
||||
swiper.checkOverflow();
|
||||
}
|
||||
}
|
||||
+269
@@ -0,0 +1,269 @@
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function (event) {
|
||||
const swiper = this;
|
||||
const data = swiper.touchEventsData;
|
||||
|
||||
const {
|
||||
params, touches, rtlTranslate: rtl, $wrapperEl, slidesGrid, snapGrid,
|
||||
} = swiper;
|
||||
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 = Utils.now();
|
||||
const timeDiff = touchEndTime - data.touchStartTime;
|
||||
|
||||
// Tap, doubleTap, Click
|
||||
if (swiper.allowClick) {
|
||||
swiper.updateClickedSlide(e);
|
||||
swiper.emit('tap', e);
|
||||
if (timeDiff < 300 && (touchEndTime - data.lastClickTime) > 300) {
|
||||
if (data.clickTimeout) clearTimeout(data.clickTimeout);
|
||||
data.clickTimeout = Utils.nextTick(() => {
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
swiper.emit('click', e);
|
||||
}, 300);
|
||||
}
|
||||
if (timeDiff < 300 && (touchEndTime - data.lastClickTime) < 300) {
|
||||
if (data.clickTimeout) clearTimeout(data.clickTimeout);
|
||||
swiper.emit('doubleTap', e);
|
||||
}
|
||||
}
|
||||
|
||||
data.lastClickTime = Utils.now();
|
||||
Utils.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.freeMode) {
|
||||
if (currentPos < -swiper.minTranslate()) {
|
||||
swiper.slideTo(swiper.activeIndex);
|
||||
return;
|
||||
}
|
||||
if (currentPos > -swiper.maxTranslate()) {
|
||||
if (swiper.slides.length < snapGrid.length) {
|
||||
swiper.slideTo(snapGrid.length - 1);
|
||||
} else {
|
||||
swiper.slideTo(swiper.slides.length - 1);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (params.freeModeMomentum) {
|
||||
if (data.velocities.length > 1) {
|
||||
const lastMoveEvent = data.velocities.pop();
|
||||
const velocityEvent = data.velocities.pop();
|
||||
|
||||
const distance = lastMoveEvent.position - velocityEvent.position;
|
||||
const time = lastMoveEvent.time - velocityEvent.time;
|
||||
swiper.velocity = distance / time;
|
||||
swiper.velocity /= 2;
|
||||
if (Math.abs(swiper.velocity) < params.freeModeMinimumVelocity) {
|
||||
swiper.velocity = 0;
|
||||
}
|
||||
// this implies that the user stopped moving a finger then released.
|
||||
// There would be no events with distance zero, so the last event is stale.
|
||||
if (time > 150 || (Utils.now() - lastMoveEvent.time) > 300) {
|
||||
swiper.velocity = 0;
|
||||
}
|
||||
} else {
|
||||
swiper.velocity = 0;
|
||||
}
|
||||
swiper.velocity *= params.freeModeMomentumVelocityRatio;
|
||||
|
||||
data.velocities.length = 0;
|
||||
let momentumDuration = 1000 * params.freeModeMomentumRatio;
|
||||
const momentumDistance = swiper.velocity * momentumDuration;
|
||||
|
||||
let newPosition = swiper.translate + momentumDistance;
|
||||
if (rtl) newPosition = -newPosition;
|
||||
|
||||
let doBounce = false;
|
||||
let afterBouncePosition;
|
||||
const bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeModeMomentumBounceRatio;
|
||||
let needsLoopFix;
|
||||
if (newPosition < swiper.maxTranslate()) {
|
||||
if (params.freeModeMomentumBounce) {
|
||||
if (newPosition + swiper.maxTranslate() < -bounceAmount) {
|
||||
newPosition = swiper.maxTranslate() - bounceAmount;
|
||||
}
|
||||
afterBouncePosition = swiper.maxTranslate();
|
||||
doBounce = true;
|
||||
data.allowMomentumBounce = true;
|
||||
} else {
|
||||
newPosition = swiper.maxTranslate();
|
||||
}
|
||||
if (params.loop && params.centeredSlides) needsLoopFix = true;
|
||||
} else if (newPosition > swiper.minTranslate()) {
|
||||
if (params.freeModeMomentumBounce) {
|
||||
if (newPosition - swiper.minTranslate() > bounceAmount) {
|
||||
newPosition = swiper.minTranslate() + bounceAmount;
|
||||
}
|
||||
afterBouncePosition = swiper.minTranslate();
|
||||
doBounce = true;
|
||||
data.allowMomentumBounce = true;
|
||||
} else {
|
||||
newPosition = swiper.minTranslate();
|
||||
}
|
||||
if (params.loop && params.centeredSlides) needsLoopFix = true;
|
||||
} else if (params.freeModeSticky) {
|
||||
let nextSlide;
|
||||
for (let j = 0; j < snapGrid.length; j += 1) {
|
||||
if (snapGrid[j] > -newPosition) {
|
||||
nextSlide = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) || swiper.swipeDirection === 'next') {
|
||||
newPosition = snapGrid[nextSlide];
|
||||
} else {
|
||||
newPosition = snapGrid[nextSlide - 1];
|
||||
}
|
||||
newPosition = -newPosition;
|
||||
}
|
||||
if (needsLoopFix) {
|
||||
swiper.once('transitionEnd', () => {
|
||||
swiper.loopFix();
|
||||
});
|
||||
}
|
||||
// Fix duration
|
||||
if (swiper.velocity !== 0) {
|
||||
if (rtl) {
|
||||
momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity);
|
||||
} else {
|
||||
momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity);
|
||||
}
|
||||
} else if (params.freeModeSticky) {
|
||||
swiper.slideToClosest();
|
||||
return;
|
||||
}
|
||||
|
||||
if (params.freeModeMomentumBounce && doBounce) {
|
||||
swiper.updateProgress(afterBouncePosition);
|
||||
swiper.setTransition(momentumDuration);
|
||||
swiper.setTranslate(newPosition);
|
||||
swiper.transitionStart(true, swiper.swipeDirection);
|
||||
swiper.animating = true;
|
||||
$wrapperEl.transitionEnd(() => {
|
||||
if (!swiper || swiper.destroyed || !data.allowMomentumBounce) return;
|
||||
swiper.emit('momentumBounce');
|
||||
|
||||
swiper.setTransition(params.speed);
|
||||
swiper.setTranslate(afterBouncePosition);
|
||||
$wrapperEl.transitionEnd(() => {
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
swiper.transitionEnd();
|
||||
});
|
||||
});
|
||||
} else if (swiper.velocity) {
|
||||
swiper.updateProgress(newPosition);
|
||||
swiper.setTransition(momentumDuration);
|
||||
swiper.setTranslate(newPosition);
|
||||
swiper.transitionStart(true, swiper.swipeDirection);
|
||||
if (!swiper.animating) {
|
||||
swiper.animating = true;
|
||||
$wrapperEl.transitionEnd(() => {
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
swiper.transitionEnd();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
swiper.updateProgress(newPosition);
|
||||
}
|
||||
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
} else if (params.freeModeSticky) {
|
||||
swiper.slideToClosest();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!params.freeModeMomentum || timeDiff >= params.longSwipesMs) {
|
||||
swiper.updateProgress();
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Find current slide
|
||||
let stopIndex = 0;
|
||||
let groupSize = swiper.slidesSizesGrid[0];
|
||||
for (let i = 0; i < slidesGrid.length; i += params.slidesPerGroup) {
|
||||
if (typeof slidesGrid[i + params.slidesPerGroup] !== 'undefined') {
|
||||
if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + params.slidesPerGroup]) {
|
||||
stopIndex = i;
|
||||
groupSize = slidesGrid[i + params.slidesPerGroup] - slidesGrid[i];
|
||||
}
|
||||
} else if (currentPos >= slidesGrid[i]) {
|
||||
stopIndex = i;
|
||||
groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];
|
||||
}
|
||||
}
|
||||
|
||||
// Find current slide size
|
||||
const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
|
||||
|
||||
if (timeDiff > params.longSwipesMs) {
|
||||
// Long touches
|
||||
if (!params.longSwipes) {
|
||||
swiper.slideTo(swiper.activeIndex);
|
||||
return;
|
||||
}
|
||||
if (swiper.swipeDirection === 'next') {
|
||||
if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + params.slidesPerGroup);
|
||||
else swiper.slideTo(stopIndex);
|
||||
}
|
||||
if (swiper.swipeDirection === 'prev') {
|
||||
if (ratio > (1 - params.longSwipesRatio)) swiper.slideTo(stopIndex + params.slidesPerGroup);
|
||||
else swiper.slideTo(stopIndex);
|
||||
}
|
||||
} else {
|
||||
// Short swipes
|
||||
if (!params.shortSwipes) {
|
||||
swiper.slideTo(swiper.activeIndex);
|
||||
return;
|
||||
}
|
||||
if (swiper.swipeDirection === 'next') {
|
||||
swiper.slideTo(stopIndex + params.slidesPerGroup);
|
||||
}
|
||||
if (swiper.swipeDirection === 'prev') {
|
||||
swiper.slideTo(stopIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
+204
@@ -0,0 +1,204 @@
|
||||
import { document } from 'ssr-window';
|
||||
import $ from '../../../utils/dom';
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function (event) {
|
||||
const swiper = this;
|
||||
const data = swiper.touchEventsData;
|
||||
const { params, touches, rtlTranslate: rtl } = swiper;
|
||||
let e = event;
|
||||
if (e.originalEvent) e = e.originalEvent;
|
||||
if (!data.isTouched) {
|
||||
if (data.startMoving && data.isScrolling) {
|
||||
swiper.emit('touchMoveOpposite', e);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (data.isTouchEvent && e.type === 'mousemove') return;
|
||||
const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
|
||||
const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
|
||||
if (e.preventedByNestedSwiper) {
|
||||
touches.startX = pageX;
|
||||
touches.startY = pageY;
|
||||
return;
|
||||
}
|
||||
if (!swiper.allowTouchMove) {
|
||||
// isMoved = true;
|
||||
swiper.allowClick = false;
|
||||
if (data.isTouched) {
|
||||
Utils.extend(touches, {
|
||||
startX: pageX,
|
||||
startY: pageY,
|
||||
currentX: pageX,
|
||||
currentY: pageY,
|
||||
});
|
||||
data.touchStartTime = Utils.now();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (data.isTouchEvent && 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 (data.isTouchEvent && document.activeElement) {
|
||||
if (e.target === document.activeElement && $(e.target).is(data.formElements)) {
|
||||
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) {
|
||||
data.isTouched = false;
|
||||
return;
|
||||
}
|
||||
if (!data.startMoving) {
|
||||
return;
|
||||
}
|
||||
swiper.allowClick = false;
|
||||
e.preventDefault();
|
||||
if (params.touchMoveStopPropagation && !params.nested) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
if (!data.isMoved) {
|
||||
if (params.loop) {
|
||||
swiper.loopFix();
|
||||
}
|
||||
data.startTranslate = swiper.getTranslate();
|
||||
swiper.setTransition(0);
|
||||
if (swiper.animating) {
|
||||
swiper.$wrapperEl.trigger('webkitTransitionEnd transitionend');
|
||||
}
|
||||
data.allowMomentumBounce = false;
|
||||
// Grab Cursor
|
||||
if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
|
||||
swiper.setGrabCursor(true);
|
||||
}
|
||||
swiper.emit('sliderFirstMove', e);
|
||||
}
|
||||
swiper.emit('sliderMove', e);
|
||||
data.isMoved = true;
|
||||
|
||||
let diff = swiper.isHorizontal() ? diffX : diffY;
|
||||
touches.diff = diff;
|
||||
|
||||
diff *= params.touchRatio;
|
||||
if (rtl) diff = -diff;
|
||||
|
||||
swiper.swipeDirection = diff > 0 ? 'prev' : 'next';
|
||||
data.currentTranslate = diff + data.startTranslate;
|
||||
|
||||
let disableParentSwiper = true;
|
||||
let resistanceRatio = params.resistanceRatio;
|
||||
if (params.touchReleaseOnEdges) {
|
||||
resistanceRatio = 0;
|
||||
}
|
||||
if ((diff > 0 && data.currentTranslate > swiper.minTranslate())) {
|
||||
disableParentSwiper = false;
|
||||
if (params.resistance) data.currentTranslate = (swiper.minTranslate() - 1) + ((-swiper.minTranslate() + data.startTranslate + diff) ** resistanceRatio);
|
||||
} else if (diff < 0 && 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;
|
||||
}
|
||||
|
||||
|
||||
// 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) return;
|
||||
|
||||
// Update active index in free mode
|
||||
if (params.freeMode || params.watchSlidesProgress || params.watchSlidesVisibility) {
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
if (params.freeMode) {
|
||||
// Velocity
|
||||
if (data.velocities.length === 0) {
|
||||
data.velocities.push({
|
||||
position: touches[swiper.isHorizontal() ? 'startX' : 'startY'],
|
||||
time: data.touchStartTime,
|
||||
});
|
||||
}
|
||||
data.velocities.push({
|
||||
position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'],
|
||||
time: Utils.now(),
|
||||
});
|
||||
}
|
||||
// Update progress
|
||||
swiper.updateProgress(data.currentTranslate);
|
||||
// Update translate
|
||||
swiper.setTranslate(data.currentTranslate);
|
||||
}
|
||||
+75
@@ -0,0 +1,75 @@
|
||||
import { window, document } from 'ssr-window';
|
||||
import $ from '../../../utils/dom';
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function (event) {
|
||||
const swiper = this;
|
||||
const data = swiper.touchEventsData;
|
||||
const { params, touches } = swiper;
|
||||
if (swiper.animating && params.preventInteractionOnTransition) {
|
||||
return;
|
||||
}
|
||||
let e = event;
|
||||
if (e.originalEvent) e = e.originalEvent;
|
||||
data.isTouchEvent = e.type === 'touchstart';
|
||||
if (!data.isTouchEvent && 'which' in e && e.which === 3) return;
|
||||
if (!data.isTouchEvent && 'button' in e && e.button > 0) return;
|
||||
if (data.isTouched && data.isMoved) return;
|
||||
if (params.noSwiping && $(e.target).closest(params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`)[0]) {
|
||||
swiper.allowClick = true;
|
||||
return;
|
||||
}
|
||||
if (params.swipeHandler) {
|
||||
if (!$(e).closest(params.swipeHandler)[0]) return;
|
||||
}
|
||||
|
||||
touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
|
||||
touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
|
||||
const startX = touches.currentX;
|
||||
const startY = touches.currentY;
|
||||
|
||||
// Do NOT start if iOS edge swipe is detected. Otherwise iOS app (UIWebView) cannot swipe-to-go-back anymore
|
||||
|
||||
const edgeSwipeDetection = params.edgeSwipeDetection || params.iOSEdgeSwipeDetection;
|
||||
const edgeSwipeThreshold = params.edgeSwipeThreshold || params.iOSEdgeSwipeThreshold;
|
||||
if (
|
||||
edgeSwipeDetection
|
||||
&& ((startX <= edgeSwipeThreshold)
|
||||
|| (startX >= window.screen.width - edgeSwipeThreshold))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
Utils.extend(data, {
|
||||
isTouched: true,
|
||||
isMoved: false,
|
||||
allowTouchCallbacks: true,
|
||||
isScrolling: undefined,
|
||||
startMoving: undefined,
|
||||
});
|
||||
|
||||
touches.startX = startX;
|
||||
touches.startY = startY;
|
||||
data.touchStartTime = Utils.now();
|
||||
swiper.allowClick = true;
|
||||
swiper.updateSize();
|
||||
swiper.swipeDirection = undefined;
|
||||
if (params.threshold > 0) data.allowThresholdMove = false;
|
||||
if (e.type !== 'touchstart') {
|
||||
let preventDefault = true;
|
||||
if ($(e.target).is(data.formElements)) preventDefault = false;
|
||||
if (
|
||||
document.activeElement
|
||||
&& $(document.activeElement).is(data.formElements)
|
||||
&& document.activeElement !== e.target
|
||||
) {
|
||||
document.activeElement.blur();
|
||||
}
|
||||
|
||||
const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
|
||||
if (params.touchStartForcePreventDefault || shouldPreventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
swiper.emit('touchStart', e);
|
||||
}
|
||||
BIN
Binary file not shown.
+7
@@ -0,0 +1,7 @@
|
||||
import setGrabCursor from './setGrabCursor';
|
||||
import unsetGrabCursor from './unsetGrabCursor';
|
||||
|
||||
export default {
|
||||
setGrabCursor,
|
||||
unsetGrabCursor,
|
||||
};
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (moving) {
|
||||
const swiper = this;
|
||||
if (Support.touch || !swiper.params.simulateTouch || (swiper.params.watchOverflow && swiper.isLocked)) return;
|
||||
const el = swiper.el;
|
||||
el.style.cursor = 'move';
|
||||
el.style.cursor = moving ? '-webkit-grabbing' : '-webkit-grab';
|
||||
el.style.cursor = moving ? '-moz-grabbin' : '-moz-grab';
|
||||
el.style.cursor = moving ? 'grabbing' : 'grab';
|
||||
}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
if (Support.touch || (swiper.params.watchOverflow && swiper.isLocked)) return;
|
||||
swiper.el.style.cursor = '';
|
||||
}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import loadImage from './loadImage';
|
||||
import preloadImages from './preloadImages';
|
||||
|
||||
export default {
|
||||
loadImage,
|
||||
preloadImages,
|
||||
};
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
import { window } from 'ssr-window';
|
||||
|
||||
export default function (imageEl, src, srcset, sizes, checkForComplete, callback) {
|
||||
let image;
|
||||
function onReady() {
|
||||
if (callback) callback();
|
||||
}
|
||||
if (!imageEl.complete || !checkForComplete) {
|
||||
if (src) {
|
||||
image = new window.Image();
|
||||
image.onload = onReady;
|
||||
image.onerror = onReady;
|
||||
if (sizes) {
|
||||
image.sizes = sizes;
|
||||
}
|
||||
if (srcset) {
|
||||
image.srcset = srcset;
|
||||
}
|
||||
if (src) {
|
||||
image.src = src;
|
||||
}
|
||||
} else {
|
||||
onReady();
|
||||
}
|
||||
} else {
|
||||
// image already loaded...
|
||||
onReady();
|
||||
}
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
swiper.imagesToLoad = swiper.$el.find('img');
|
||||
function onReady() {
|
||||
if (typeof swiper === 'undefined' || swiper === null || !swiper || swiper.destroyed) return;
|
||||
if (swiper.imagesLoaded !== undefined) swiper.imagesLoaded += 1;
|
||||
if (swiper.imagesLoaded === swiper.imagesToLoad.length) {
|
||||
if (swiper.params.updateOnImagesReady) swiper.update();
|
||||
swiper.emit('imagesReady');
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < swiper.imagesToLoad.length; i += 1) {
|
||||
const imageEl = swiper.imagesToLoad[i];
|
||||
swiper.loadImage(
|
||||
imageEl,
|
||||
imageEl.currentSrc || imageEl.getAttribute('src'),
|
||||
imageEl.srcset || imageEl.getAttribute('srcset'),
|
||||
imageEl.sizes || imageEl.getAttribute('sizes'),
|
||||
true,
|
||||
onReady
|
||||
);
|
||||
}
|
||||
}
|
||||
BIN
Binary file not shown.
+9
@@ -0,0 +1,9 @@
|
||||
import loopCreate from './loopCreate';
|
||||
import loopFix from './loopFix';
|
||||
import loopDestroy from './loopDestroy';
|
||||
|
||||
export default {
|
||||
loopCreate,
|
||||
loopFix,
|
||||
loopDestroy,
|
||||
};
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
import { document } from 'ssr-window';
|
||||
import $ from '../../../utils/dom';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const { params, $wrapperEl } = swiper;
|
||||
// Remove duplicated slides
|
||||
$wrapperEl.children(`.${params.slideClass}.${params.slideDuplicateClass}`).remove();
|
||||
|
||||
let slides = $wrapperEl.children(`.${params.slideClass}`);
|
||||
|
||||
if (params.loopFillGroupWithBlank) {
|
||||
const blankSlidesNum = params.slidesPerGroup - (slides.length % params.slidesPerGroup);
|
||||
if (blankSlidesNum !== params.slidesPerGroup) {
|
||||
for (let i = 0; i < blankSlidesNum; i += 1) {
|
||||
const blankNode = $(document.createElement('div')).addClass(`${params.slideClass} ${params.slideBlankClass}`);
|
||||
$wrapperEl.append(blankNode);
|
||||
}
|
||||
slides = $wrapperEl.children(`.${params.slideClass}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (params.slidesPerView === 'auto' && !params.loopedSlides) params.loopedSlides = slides.length;
|
||||
|
||||
swiper.loopedSlides = parseInt(params.loopedSlides || params.slidesPerView, 10);
|
||||
swiper.loopedSlides += params.loopAdditionalSlides;
|
||||
if (swiper.loopedSlides > slides.length) {
|
||||
swiper.loopedSlides = slides.length;
|
||||
}
|
||||
|
||||
const prependSlides = [];
|
||||
const appendSlides = [];
|
||||
slides.each((index, el) => {
|
||||
const slide = $(el);
|
||||
if (index < swiper.loopedSlides) appendSlides.push(el);
|
||||
if (index < slides.length && index >= slides.length - swiper.loopedSlides) prependSlides.push(el);
|
||||
slide.attr('data-swiper-slide-index', index);
|
||||
});
|
||||
for (let i = 0; i < appendSlides.length; i += 1) {
|
||||
$wrapperEl.append($(appendSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
|
||||
}
|
||||
for (let i = prependSlides.length - 1; i >= 0; i -= 1) {
|
||||
$wrapperEl.prepend($(prependSlides[i].cloneNode(true)).addClass(params.slideDuplicateClass));
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const { $wrapperEl, params, slides } = swiper;
|
||||
$wrapperEl.children(`.${params.slideClass}.${params.slideDuplicateClass},.${params.slideClass}.${params.slideBlankClass}`).remove();
|
||||
slides.removeAttr('data-swiper-slide-index');
|
||||
}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const {
|
||||
params, activeIndex, slides, loopedSlides, allowSlidePrev, allowSlideNext, snapGrid, rtlTranslate: rtl,
|
||||
} = swiper;
|
||||
let newIndex;
|
||||
swiper.allowSlidePrev = true;
|
||||
swiper.allowSlideNext = true;
|
||||
|
||||
const snapTranslate = -snapGrid[activeIndex];
|
||||
const diff = snapTranslate - swiper.getTranslate();
|
||||
|
||||
|
||||
// Fix For Negative Oversliding
|
||||
if (activeIndex < loopedSlides) {
|
||||
newIndex = (slides.length - (loopedSlides * 3)) + activeIndex;
|
||||
newIndex += loopedSlides;
|
||||
const slideChanged = swiper.slideTo(newIndex, 0, false, true);
|
||||
if (slideChanged && diff !== 0) {
|
||||
swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
|
||||
}
|
||||
} else if ((params.slidesPerView === 'auto' && activeIndex >= loopedSlides * 2) || (activeIndex >= slides.length - loopedSlides)) {
|
||||
// Fix For Positive Oversliding
|
||||
newIndex = -slides.length + activeIndex + loopedSlides;
|
||||
newIndex += loopedSlides;
|
||||
const slideChanged = swiper.slideTo(newIndex, 0, false, true);
|
||||
if (slideChanged && diff !== 0) {
|
||||
swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
|
||||
}
|
||||
}
|
||||
swiper.allowSlidePrev = allowSlidePrev;
|
||||
swiper.allowSlideNext = allowSlideNext;
|
||||
}
|
||||
BIN
Binary file not shown.
+54
@@ -0,0 +1,54 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (index, slides) {
|
||||
const swiper = this;
|
||||
const { $wrapperEl, params, activeIndex } = swiper;
|
||||
let activeIndexBuffer = activeIndex;
|
||||
if (params.loop) {
|
||||
activeIndexBuffer -= swiper.loopedSlides;
|
||||
swiper.loopDestroy();
|
||||
swiper.slides = $wrapperEl.children(`.${params.slideClass}`);
|
||||
}
|
||||
const baseLength = swiper.slides.length;
|
||||
if (index <= 0) {
|
||||
swiper.prependSlide(slides);
|
||||
return;
|
||||
}
|
||||
if (index >= baseLength) {
|
||||
swiper.appendSlide(slides);
|
||||
return;
|
||||
}
|
||||
let newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + 1 : activeIndexBuffer;
|
||||
|
||||
const slidesBuffer = [];
|
||||
for (let i = baseLength - 1; i >= index; i -= 1) {
|
||||
const currentSlide = swiper.slides.eq(i);
|
||||
currentSlide.remove();
|
||||
slidesBuffer.unshift(currentSlide);
|
||||
}
|
||||
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) $wrapperEl.append(slides[i]);
|
||||
}
|
||||
newActiveIndex = activeIndexBuffer > index ? activeIndexBuffer + slides.length : activeIndexBuffer;
|
||||
} else {
|
||||
$wrapperEl.append(slides);
|
||||
}
|
||||
|
||||
for (let i = 0; i < slidesBuffer.length; i += 1) {
|
||||
$wrapperEl.append(slidesBuffer[i]);
|
||||
}
|
||||
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!(params.observer && Support.observer)) {
|
||||
swiper.update();
|
||||
}
|
||||
if (params.loop) {
|
||||
swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);
|
||||
} else {
|
||||
swiper.slideTo(newActiveIndex, 0, false);
|
||||
}
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (slides) {
|
||||
const swiper = this;
|
||||
const { $wrapperEl, params } = swiper;
|
||||
if (params.loop) {
|
||||
swiper.loopDestroy();
|
||||
}
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) $wrapperEl.append(slides[i]);
|
||||
}
|
||||
} else {
|
||||
$wrapperEl.append(slides);
|
||||
}
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!(params.observer && Support.observer)) {
|
||||
swiper.update();
|
||||
}
|
||||
}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import appendSlide from './appendSlide';
|
||||
import prependSlide from './prependSlide';
|
||||
import addSlide from './addSlide';
|
||||
import removeSlide from './removeSlide';
|
||||
import removeAllSlides from './removeAllSlides';
|
||||
|
||||
export default {
|
||||
appendSlide,
|
||||
prependSlide,
|
||||
addSlide,
|
||||
removeSlide,
|
||||
removeAllSlides,
|
||||
};
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (slides) {
|
||||
const swiper = this;
|
||||
const { params, $wrapperEl, activeIndex } = swiper;
|
||||
|
||||
if (params.loop) {
|
||||
swiper.loopDestroy();
|
||||
}
|
||||
let newActiveIndex = activeIndex + 1;
|
||||
if (typeof slides === 'object' && 'length' in slides) {
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
if (slides[i]) $wrapperEl.prepend(slides[i]);
|
||||
}
|
||||
newActiveIndex = activeIndex + slides.length;
|
||||
} else {
|
||||
$wrapperEl.prepend(slides);
|
||||
}
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
if (!(params.observer && Support.observer)) {
|
||||
swiper.update();
|
||||
}
|
||||
swiper.slideTo(newActiveIndex, 0, false);
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
|
||||
const slidesIndexes = [];
|
||||
for (let i = 0; i < swiper.slides.length; i += 1) {
|
||||
slidesIndexes.push(i);
|
||||
}
|
||||
swiper.removeSlide(slidesIndexes);
|
||||
}
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (slidesIndexes) {
|
||||
const swiper = this;
|
||||
const { params, $wrapperEl, activeIndex } = swiper;
|
||||
|
||||
let activeIndexBuffer = activeIndex;
|
||||
if (params.loop) {
|
||||
activeIndexBuffer -= swiper.loopedSlides;
|
||||
swiper.loopDestroy();
|
||||
swiper.slides = $wrapperEl.children(`.${params.slideClass}`);
|
||||
}
|
||||
let newActiveIndex = activeIndexBuffer;
|
||||
let indexToRemove;
|
||||
|
||||
if (typeof slidesIndexes === 'object' && 'length' in slidesIndexes) {
|
||||
for (let i = 0; i < slidesIndexes.length; i += 1) {
|
||||
indexToRemove = slidesIndexes[i];
|
||||
if (swiper.slides[indexToRemove]) swiper.slides.eq(indexToRemove).remove();
|
||||
if (indexToRemove < newActiveIndex) newActiveIndex -= 1;
|
||||
}
|
||||
newActiveIndex = Math.max(newActiveIndex, 0);
|
||||
} else {
|
||||
indexToRemove = slidesIndexes;
|
||||
if (swiper.slides[indexToRemove]) swiper.slides.eq(indexToRemove).remove();
|
||||
if (indexToRemove < newActiveIndex) newActiveIndex -= 1;
|
||||
newActiveIndex = Math.max(newActiveIndex, 0);
|
||||
}
|
||||
|
||||
if (params.loop) {
|
||||
swiper.loopCreate();
|
||||
}
|
||||
|
||||
if (!(params.observer && Support.observer)) {
|
||||
swiper.update();
|
||||
}
|
||||
if (params.loop) {
|
||||
swiper.slideTo(newActiveIndex + swiper.loopedSlides, 0, false);
|
||||
} else {
|
||||
swiper.slideTo(newActiveIndex, 0, false);
|
||||
}
|
||||
}
|
||||
BIN
Binary file not shown.
+17
@@ -0,0 +1,17 @@
|
||||
import slideTo from './slideTo';
|
||||
import slideToLoop from './slideToLoop';
|
||||
import slideNext from './slideNext';
|
||||
import slidePrev from './slidePrev';
|
||||
import slideReset from './slideReset';
|
||||
import slideToClosest from './slideToClosest';
|
||||
import slideToClickedSlide from './slideToClickedSlide';
|
||||
|
||||
export default {
|
||||
slideTo,
|
||||
slideToLoop,
|
||||
slideNext,
|
||||
slidePrev,
|
||||
slideReset,
|
||||
slideToClosest,
|
||||
slideToClickedSlide,
|
||||
};
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
/* eslint no-unused-vars: "off" */
|
||||
export default function (speed = this.params.speed, runCallbacks = true, internal) {
|
||||
const swiper = this;
|
||||
const { params, animating } = swiper;
|
||||
if (params.loop) {
|
||||
if (animating) return false;
|
||||
swiper.loopFix();
|
||||
// eslint-disable-next-line
|
||||
swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
|
||||
return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
|
||||
}
|
||||
return swiper.slideTo(swiper.activeIndex + params.slidesPerGroup, speed, runCallbacks, internal);
|
||||
}
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
/* eslint no-unused-vars: "off" */
|
||||
export default function (speed = this.params.speed, runCallbacks = true, internal) {
|
||||
const swiper = this;
|
||||
const {
|
||||
params, animating, snapGrid, slidesGrid, rtlTranslate,
|
||||
} = swiper;
|
||||
|
||||
if (params.loop) {
|
||||
if (animating) return false;
|
||||
swiper.loopFix();
|
||||
// eslint-disable-next-line
|
||||
swiper._clientLeft = swiper.$wrapperEl[0].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));
|
||||
const normalizedSlidesGrid = slidesGrid.map((val) => normalize(val));
|
||||
|
||||
const currentSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate)];
|
||||
const prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];
|
||||
let prevIndex;
|
||||
if (typeof prevSnap !== 'undefined') {
|
||||
prevIndex = slidesGrid.indexOf(prevSnap);
|
||||
if (prevIndex < 0) prevIndex = swiper.activeIndex - 1;
|
||||
}
|
||||
return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
|
||||
}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
/* eslint no-unused-vars: "off" */
|
||||
export default function (speed = this.params.speed, runCallbacks = true, internal) {
|
||||
const swiper = this;
|
||||
return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
|
||||
}
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (index = 0, speed = this.params.speed, runCallbacks = true, internal) {
|
||||
const swiper = this;
|
||||
let slideIndex = index;
|
||||
if (slideIndex < 0) slideIndex = 0;
|
||||
|
||||
const {
|
||||
params, snapGrid, slidesGrid, previousIndex, activeIndex, rtlTranslate: rtl,
|
||||
} = swiper;
|
||||
if (swiper.animating && params.preventInteractionOnTransition) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let snapIndex = Math.floor(slideIndex / params.slidesPerGroup);
|
||||
if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
|
||||
|
||||
if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) {
|
||||
swiper.emit('beforeSlideChangeStart');
|
||||
}
|
||||
|
||||
const translate = -snapGrid[snapIndex];
|
||||
|
||||
// Update progress
|
||||
swiper.updateProgress(translate);
|
||||
|
||||
// Normalize slideIndex
|
||||
if (params.normalizeSlideIndex) {
|
||||
for (let i = 0; i < slidesGrid.length; i += 1) {
|
||||
if (-Math.floor(translate * 100) >= Math.floor(slidesGrid[i] * 100)) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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 (speed === 0 || !Support.transition) {
|
||||
swiper.setTransition(0);
|
||||
swiper.setTranslate(translate);
|
||||
swiper.updateActiveIndex(slideIndex);
|
||||
swiper.updateSlidesClasses();
|
||||
swiper.emit('beforeTransitionStart', speed, internal);
|
||||
swiper.transitionStart(runCallbacks, direction);
|
||||
swiper.transitionEnd(runCallbacks, direction);
|
||||
} else {
|
||||
swiper.setTransition(speed);
|
||||
swiper.setTranslate(translate);
|
||||
swiper.updateActiveIndex(slideIndex);
|
||||
swiper.updateSlidesClasses();
|
||||
swiper.emit('beforeTransitionStart', speed, internal);
|
||||
swiper.transitionStart(runCallbacks, direction);
|
||||
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[0].removeEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
|
||||
swiper.$wrapperEl[0].removeEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd);
|
||||
swiper.onSlideToWrapperTransitionEnd = null;
|
||||
delete swiper.onSlideToWrapperTransitionEnd;
|
||||
swiper.transitionEnd(runCallbacks, direction);
|
||||
};
|
||||
}
|
||||
swiper.$wrapperEl[0].addEventListener('transitionend', swiper.onSlideToWrapperTransitionEnd);
|
||||
swiper.$wrapperEl[0].addEventListener('webkitTransitionEnd', swiper.onSlideToWrapperTransitionEnd);
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
import $ from '../../../utils/dom';
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const { params, $wrapperEl } = swiper;
|
||||
|
||||
const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;
|
||||
let slideToIndex = swiper.clickedIndex;
|
||||
let realIndex;
|
||||
if (params.loop) {
|
||||
if (swiper.animating) return;
|
||||
realIndex = parseInt($(swiper.clickedSlide).attr('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 = $wrapperEl
|
||||
.children(`.${params.slideClass}[data-swiper-slide-index="${realIndex}"]:not(.${params.slideDuplicateClass})`)
|
||||
.eq(0)
|
||||
.index();
|
||||
|
||||
Utils.nextTick(() => {
|
||||
swiper.slideTo(slideToIndex);
|
||||
});
|
||||
} else {
|
||||
swiper.slideTo(slideToIndex);
|
||||
}
|
||||
} else if (slideToIndex > swiper.slides.length - slidesPerView) {
|
||||
swiper.loopFix();
|
||||
slideToIndex = $wrapperEl
|
||||
.children(`.${params.slideClass}[data-swiper-slide-index="${realIndex}"]:not(.${params.slideDuplicateClass})`)
|
||||
.eq(0)
|
||||
.index();
|
||||
|
||||
Utils.nextTick(() => {
|
||||
swiper.slideTo(slideToIndex);
|
||||
});
|
||||
} else {
|
||||
swiper.slideTo(slideToIndex);
|
||||
}
|
||||
} else {
|
||||
swiper.slideTo(slideToIndex);
|
||||
}
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/* eslint no-unused-vars: "off" */
|
||||
export default function (speed = this.params.speed, runCallbacks = true, internal) {
|
||||
const swiper = this;
|
||||
let index = swiper.activeIndex;
|
||||
const snapIndex = Math.floor(index / swiper.params.slidesPerGroup);
|
||||
|
||||
if (snapIndex < swiper.snapGrid.length - 1) {
|
||||
const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
|
||||
|
||||
const currentSnap = swiper.snapGrid[snapIndex];
|
||||
const nextSnap = swiper.snapGrid[snapIndex + 1];
|
||||
|
||||
if ((translate - currentSnap) > (nextSnap - currentSnap) / 2) {
|
||||
index = swiper.params.slidesPerGroup;
|
||||
}
|
||||
}
|
||||
|
||||
return swiper.slideTo(index, speed, runCallbacks, internal);
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
export default function (index = 0, speed = this.params.speed, runCallbacks = true, internal) {
|
||||
const swiper = this;
|
||||
let newIndex = index;
|
||||
if (swiper.params.loop) {
|
||||
newIndex += swiper.loopedSlides;
|
||||
}
|
||||
|
||||
return swiper.slideTo(newIndex, speed, runCallbacks, internal);
|
||||
}
|
||||
BIN
Binary file not shown.
+9
@@ -0,0 +1,9 @@
|
||||
import setTransition from './setTransition';
|
||||
import transitionStart from './transitionStart';
|
||||
import transitionEnd from './transitionEnd';
|
||||
|
||||
export default {
|
||||
setTransition,
|
||||
transitionStart,
|
||||
transitionEnd,
|
||||
};
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
export default function (duration, byController) {
|
||||
const swiper = this;
|
||||
|
||||
swiper.$wrapperEl.transition(duration);
|
||||
|
||||
swiper.emit('setTransition', duration, byController);
|
||||
}
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
export default function (runCallbacks = true, direction) {
|
||||
const swiper = this;
|
||||
const { activeIndex, previousIndex } = swiper;
|
||||
swiper.animating = false;
|
||||
swiper.setTransition(0);
|
||||
|
||||
let dir = direction;
|
||||
if (!dir) {
|
||||
if (activeIndex > previousIndex) dir = 'next';
|
||||
else if (activeIndex < previousIndex) dir = 'prev';
|
||||
else dir = 'reset';
|
||||
}
|
||||
|
||||
swiper.emit('transitionEnd');
|
||||
|
||||
if (runCallbacks && activeIndex !== previousIndex) {
|
||||
if (dir === 'reset') {
|
||||
swiper.emit('slideResetTransitionEnd');
|
||||
return;
|
||||
}
|
||||
swiper.emit('slideChangeTransitionEnd');
|
||||
if (dir === 'next') {
|
||||
swiper.emit('slideNextTransitionEnd');
|
||||
} else {
|
||||
swiper.emit('slidePrevTransitionEnd');
|
||||
}
|
||||
}
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
export default function (runCallbacks = true, direction) {
|
||||
const swiper = this;
|
||||
const { activeIndex, params, previousIndex } = swiper;
|
||||
if (params.autoHeight) {
|
||||
swiper.updateAutoHeight();
|
||||
}
|
||||
|
||||
let dir = direction;
|
||||
if (!dir) {
|
||||
if (activeIndex > previousIndex) dir = 'next';
|
||||
else if (activeIndex < previousIndex) dir = 'prev';
|
||||
else dir = 'reset';
|
||||
}
|
||||
|
||||
swiper.emit('transitionStart');
|
||||
|
||||
if (runCallbacks && activeIndex !== previousIndex) {
|
||||
if (dir === 'reset') {
|
||||
swiper.emit('slideResetTransitionStart');
|
||||
return;
|
||||
}
|
||||
swiper.emit('slideChangeTransitionStart');
|
||||
if (dir === 'next') {
|
||||
swiper.emit('slideNextTransitionStart');
|
||||
} else {
|
||||
swiper.emit('slidePrevTransitionStart');
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
Binary file not shown.
+18
@@ -0,0 +1,18 @@
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function (axis = this.isHorizontal() ? 'x' : 'y') {
|
||||
const swiper = this;
|
||||
|
||||
const {
|
||||
params, rtlTranslate: rtl, translate, $wrapperEl,
|
||||
} = swiper;
|
||||
|
||||
if (params.virtualTranslate) {
|
||||
return rtl ? -translate : translate;
|
||||
}
|
||||
|
||||
let currentTranslate = Utils.getTranslate($wrapperEl[0], axis);
|
||||
if (rtl) currentTranslate = -currentTranslate;
|
||||
|
||||
return currentTranslate || 0;
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import getTranslate from './getTranslate';
|
||||
import setTranslate from './setTranslate';
|
||||
import minTranslate from './minTranslate';
|
||||
import maxTranslate from './maxTranslate';
|
||||
|
||||
export default {
|
||||
getTranslate,
|
||||
setTranslate,
|
||||
minTranslate,
|
||||
maxTranslate,
|
||||
};
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export default function () {
|
||||
return (-this.snapGrid[this.snapGrid.length - 1]);
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export default function () {
|
||||
return (-this.snapGrid[0]);
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
import Support from '../../../utils/support';
|
||||
|
||||
export default function (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.virtualTranslate) {
|
||||
if (Support.transforms3d) $wrapperEl.transform(`translate3d(${x}px, ${y}px, ${z}px)`);
|
||||
else $wrapperEl.transform(`translate(${x}px, ${y}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);
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
import updateSize from './updateSize';
|
||||
import updateSlides from './updateSlides';
|
||||
import updateAutoHeight from './updateAutoHeight';
|
||||
import updateSlidesOffset from './updateSlidesOffset';
|
||||
import updateSlidesProgress from './updateSlidesProgress';
|
||||
import updateProgress from './updateProgress';
|
||||
import updateSlidesClasses from './updateSlidesClasses';
|
||||
import updateActiveIndex from './updateActiveIndex';
|
||||
import updateClickedSlide from './updateClickedSlide';
|
||||
|
||||
export default {
|
||||
updateSize,
|
||||
updateSlides,
|
||||
updateAutoHeight,
|
||||
updateSlidesOffset,
|
||||
updateSlidesProgress,
|
||||
updateProgress,
|
||||
updateSlidesClasses,
|
||||
updateActiveIndex,
|
||||
updateClickedSlide,
|
||||
};
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function (newActiveIndex) {
|
||||
const swiper = this;
|
||||
const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
|
||||
const {
|
||||
slidesGrid, snapGrid, params, activeIndex: previousIndex, realIndex: previousRealIndex, snapIndex: previousSnapIndex,
|
||||
} = swiper;
|
||||
let activeIndex = newActiveIndex;
|
||||
let snapIndex;
|
||||
if (typeof activeIndex === 'undefined') {
|
||||
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;
|
||||
}
|
||||
}
|
||||
if (snapGrid.indexOf(translate) >= 0) {
|
||||
snapIndex = snapGrid.indexOf(translate);
|
||||
} else {
|
||||
snapIndex = Math.floor(activeIndex / params.slidesPerGroup);
|
||||
}
|
||||
if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
|
||||
if (activeIndex === previousIndex) {
|
||||
if (snapIndex !== previousSnapIndex) {
|
||||
swiper.snapIndex = snapIndex;
|
||||
swiper.emit('snapIndexChange');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Get real index
|
||||
const realIndex = parseInt(swiper.slides.eq(activeIndex).attr('data-swiper-slide-index') || activeIndex, 10);
|
||||
|
||||
Utils.extend(swiper, {
|
||||
snapIndex,
|
||||
realIndex,
|
||||
previousIndex,
|
||||
activeIndex,
|
||||
});
|
||||
swiper.emit('activeIndexChange');
|
||||
swiper.emit('snapIndexChange');
|
||||
if (previousRealIndex !== realIndex) {
|
||||
swiper.emit('realIndexChange');
|
||||
}
|
||||
if (swiper.initialized || swiper.runCallbacksOnInit) {
|
||||
swiper.emit('slideChange');
|
||||
}
|
||||
}
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
export default function (speed) {
|
||||
const swiper = this;
|
||||
const activeSlides = [];
|
||||
let newHeight = 0;
|
||||
let i;
|
||||
if (typeof speed === 'number') {
|
||||
swiper.setTransition(speed);
|
||||
} else if (speed === true) {
|
||||
swiper.setTransition(swiper.params.speed);
|
||||
}
|
||||
// Find slides currently in view
|
||||
if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {
|
||||
for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) {
|
||||
const index = swiper.activeIndex + i;
|
||||
if (index > swiper.slides.length) break;
|
||||
activeSlides.push(swiper.slides.eq(index)[0]);
|
||||
}
|
||||
} else {
|
||||
activeSlides.push(swiper.slides.eq(swiper.activeIndex)[0]);
|
||||
}
|
||||
|
||||
// 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) swiper.$wrapperEl.css('height', `${newHeight}px`);
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
import $ from '../../../utils/dom';
|
||||
|
||||
export default function (e) {
|
||||
const swiper = this;
|
||||
const params = swiper.params;
|
||||
const slide = $(e.target).closest(`.${params.slideClass}`)[0];
|
||||
let slideFound = false;
|
||||
if (slide) {
|
||||
for (let i = 0; i < swiper.slides.length; i += 1) {
|
||||
if (swiper.slides[i] === slide) slideFound = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (slide && slideFound) {
|
||||
swiper.clickedSlide = slide;
|
||||
if (swiper.virtual && swiper.params.virtual.enabled) {
|
||||
swiper.clickedIndex = parseInt($(slide).attr('data-swiper-slide-index'), 10);
|
||||
} else {
|
||||
swiper.clickedIndex = $(slide).index();
|
||||
}
|
||||
} else {
|
||||
swiper.clickedSlide = undefined;
|
||||
swiper.clickedIndex = undefined;
|
||||
return;
|
||||
}
|
||||
if (params.slideToClickedSlide && swiper.clickedIndex !== undefined && swiper.clickedIndex !== swiper.activeIndex) {
|
||||
swiper.slideToClickedSlide();
|
||||
}
|
||||
}
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function (translate = (this && this.translate) || 0) {
|
||||
const swiper = this;
|
||||
const params = swiper.params;
|
||||
|
||||
const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
|
||||
let { progress, isBeginning, isEnd } = swiper;
|
||||
const wasBeginning = isBeginning;
|
||||
const wasEnd = isEnd;
|
||||
if (translatesDiff === 0) {
|
||||
progress = 0;
|
||||
isBeginning = true;
|
||||
isEnd = true;
|
||||
} else {
|
||||
progress = (translate - swiper.minTranslate()) / (translatesDiff);
|
||||
isBeginning = progress <= 0;
|
||||
isEnd = progress >= 1;
|
||||
}
|
||||
Utils.extend(swiper, {
|
||||
progress,
|
||||
isBeginning,
|
||||
isEnd,
|
||||
});
|
||||
|
||||
if (params.watchSlidesProgress || params.watchSlidesVisibility) 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
@@ -0,0 +1,31 @@
|
||||
import Utils from '../../../utils/utils';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
let width;
|
||||
let height;
|
||||
const $el = swiper.$el;
|
||||
if (typeof swiper.params.width !== 'undefined') {
|
||||
width = swiper.params.width;
|
||||
} else {
|
||||
width = $el[0].clientWidth;
|
||||
}
|
||||
if (typeof swiper.params.height !== 'undefined') {
|
||||
height = swiper.params.height;
|
||||
} else {
|
||||
height = $el[0].clientHeight;
|
||||
}
|
||||
if ((width === 0 && swiper.isHorizontal()) || (height === 0 && swiper.isVertical())) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Subtract paddings
|
||||
width = width - parseInt($el.css('padding-left'), 10) - parseInt($el.css('padding-right'), 10);
|
||||
height = height - parseInt($el.css('padding-top'), 10) - parseInt($el.css('padding-bottom'), 10);
|
||||
|
||||
Utils.extend(swiper, {
|
||||
width,
|
||||
height,
|
||||
size: swiper.isHorizontal() ? width : height,
|
||||
});
|
||||
}
|
||||
+296
@@ -0,0 +1,296 @@
|
||||
import { window } from 'ssr-window';
|
||||
import Utils from '../../../utils/utils';
|
||||
import Support from '../../../utils/support';
|
||||
import Browser from '../../../utils/browser';
|
||||
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const params = swiper.params;
|
||||
|
||||
const {
|
||||
$wrapperEl, 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 = $wrapperEl.children(`.${swiper.params.slideClass}`);
|
||||
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.snapGrid.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
|
||||
if (rtl) slides.css({ marginLeft: '', marginTop: '' });
|
||||
else slides.css({ marginRight: '', marginBottom: '' });
|
||||
|
||||
let slidesNumberEvenToRows;
|
||||
if (params.slidesPerColumn > 1) {
|
||||
if (Math.floor(slidesLength / params.slidesPerColumn) === slidesLength / swiper.params.slidesPerColumn) {
|
||||
slidesNumberEvenToRows = slidesLength;
|
||||
} else {
|
||||
slidesNumberEvenToRows = Math.ceil(slidesLength / params.slidesPerColumn) * params.slidesPerColumn;
|
||||
}
|
||||
if (params.slidesPerView !== 'auto' && params.slidesPerColumnFill === 'row') {
|
||||
slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, params.slidesPerView * params.slidesPerColumn);
|
||||
}
|
||||
}
|
||||
|
||||
// Calc slides
|
||||
let slideSize;
|
||||
const slidesPerColumn = params.slidesPerColumn;
|
||||
const slidesPerRow = slidesNumberEvenToRows / slidesPerColumn;
|
||||
const numFullColumns = Math.floor(slidesLength / params.slidesPerColumn);
|
||||
for (let i = 0; i < slidesLength; i += 1) {
|
||||
slideSize = 0;
|
||||
const slide = slides.eq(i);
|
||||
if (params.slidesPerColumn > 1) {
|
||||
// Set slides order
|
||||
let newSlideOrderIndex;
|
||||
let column;
|
||||
let row;
|
||||
if (
|
||||
(params.slidesPerColumnFill === 'column')
|
||||
|| (params.slidesPerColumnFill === 'row' && params.slidesPerGroup > 1)
|
||||
) {
|
||||
if (params.slidesPerColumnFill === 'column') {
|
||||
column = Math.floor(i / slidesPerColumn);
|
||||
row = i - (column * slidesPerColumn);
|
||||
if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn - 1)) {
|
||||
row += 1;
|
||||
if (row >= slidesPerColumn) {
|
||||
row = 0;
|
||||
column += 1;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const groupIndex = Math.floor(i / params.slidesPerGroup);
|
||||
row = Math.floor(i / params.slidesPerView) - groupIndex * params.slidesPerColumn;
|
||||
column = i - row * params.slidesPerView - groupIndex * params.slidesPerView;
|
||||
}
|
||||
newSlideOrderIndex = column + ((row * slidesNumberEvenToRows) / slidesPerColumn);
|
||||
slide
|
||||
.css({
|
||||
'-webkit-box-ordinal-group': newSlideOrderIndex,
|
||||
'-moz-box-ordinal-group': newSlideOrderIndex,
|
||||
'-ms-flex-order': newSlideOrderIndex,
|
||||
'-webkit-order': newSlideOrderIndex,
|
||||
order: newSlideOrderIndex,
|
||||
});
|
||||
} else {
|
||||
row = Math.floor(i / slidesPerRow);
|
||||
column = i - (row * slidesPerRow);
|
||||
}
|
||||
slide
|
||||
.css(
|
||||
`margin-${swiper.isHorizontal() ? 'top' : 'left'}`,
|
||||
(row !== 0 && params.spaceBetween) && (`${params.spaceBetween}px`)
|
||||
)
|
||||
.attr('data-swiper-column', column)
|
||||
.attr('data-swiper-row', row);
|
||||
}
|
||||
if (slide.css('display') === 'none') continue; // eslint-disable-line
|
||||
|
||||
if (params.slidesPerView === 'auto') {
|
||||
const slideStyles = window.getComputedStyle(slide[0], null);
|
||||
const currentTransform = slide[0].style.transform;
|
||||
const currentWebKitTransform = slide[0].style.webkitTransform;
|
||||
if (currentTransform) {
|
||||
slide[0].style.transform = 'none';
|
||||
}
|
||||
if (currentWebKitTransform) {
|
||||
slide[0].style.webkitTransform = 'none';
|
||||
}
|
||||
if (params.roundLengths) {
|
||||
slideSize = swiper.isHorizontal()
|
||||
? slide.outerWidth(true)
|
||||
: slide.outerHeight(true);
|
||||
} else {
|
||||
// eslint-disable-next-line
|
||||
if (swiper.isHorizontal()) {
|
||||
const width = parseFloat(slideStyles.getPropertyValue('width'));
|
||||
const paddingLeft = parseFloat(slideStyles.getPropertyValue('padding-left'));
|
||||
const paddingRight = parseFloat(slideStyles.getPropertyValue('padding-right'));
|
||||
const marginLeft = parseFloat(slideStyles.getPropertyValue('margin-left'));
|
||||
const marginRight = parseFloat(slideStyles.getPropertyValue('margin-right'));
|
||||
const boxSizing = slideStyles.getPropertyValue('box-sizing');
|
||||
if (boxSizing && boxSizing === 'border-box' && !Browser.isIE) {
|
||||
slideSize = width + marginLeft + marginRight;
|
||||
} else {
|
||||
slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight;
|
||||
}
|
||||
} else {
|
||||
const height = parseFloat(slideStyles.getPropertyValue('height'));
|
||||
const paddingTop = parseFloat(slideStyles.getPropertyValue('padding-top'));
|
||||
const paddingBottom = parseFloat(slideStyles.getPropertyValue('padding-bottom'));
|
||||
const marginTop = parseFloat(slideStyles.getPropertyValue('margin-top'));
|
||||
const marginBottom = parseFloat(slideStyles.getPropertyValue('margin-bottom'));
|
||||
const boxSizing = slideStyles.getPropertyValue('box-sizing');
|
||||
if (boxSizing && boxSizing === 'border-box' && !Browser.isIE) {
|
||||
slideSize = height + marginTop + marginBottom;
|
||||
} else {
|
||||
slideSize = height + paddingTop + paddingBottom + marginTop + marginBottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (currentTransform) {
|
||||
slide[0].style.transform = currentTransform;
|
||||
}
|
||||
if (currentWebKitTransform) {
|
||||
slide[0].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]) {
|
||||
if (swiper.isHorizontal()) {
|
||||
slides[i].style.width = `${slideSize}px`;
|
||||
} else {
|
||||
slides[i].style.height = `${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) % 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;
|
||||
let newSlidesGrid;
|
||||
|
||||
if (
|
||||
rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
|
||||
$wrapperEl.css({ width: `${swiper.virtualSize + params.spaceBetween}px` });
|
||||
}
|
||||
if (!Support.flexbox || params.setWrapperSize) {
|
||||
if (swiper.isHorizontal()) $wrapperEl.css({ width: `${swiper.virtualSize + params.spaceBetween}px` });
|
||||
else $wrapperEl.css({ height: `${swiper.virtualSize + params.spaceBetween}px` });
|
||||
}
|
||||
|
||||
if (params.slidesPerColumn > 1) {
|
||||
swiper.virtualSize = (slideSize + params.spaceBetween) * slidesNumberEvenToRows;
|
||||
swiper.virtualSize = Math.ceil(swiper.virtualSize / params.slidesPerColumn) - params.spaceBetween;
|
||||
if (swiper.isHorizontal()) $wrapperEl.css({ width: `${swiper.virtualSize + params.spaceBetween}px` });
|
||||
else $wrapperEl.css({ height: `${swiper.virtualSize + params.spaceBetween}px` });
|
||||
if (params.centeredSlides) {
|
||||
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 + snapGrid[0]) newSlidesGrid.push(slidesGridItem);
|
||||
}
|
||||
snapGrid = newSlidesGrid;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove last grid elements depending on width
|
||||
if (!params.centeredSlides) {
|
||||
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 (snapGrid.length === 0) snapGrid = [0];
|
||||
|
||||
if (params.spaceBetween !== 0) {
|
||||
if (swiper.isHorizontal()) {
|
||||
if (rtl) slides.css({ marginLeft: `${spaceBetween}px` });
|
||||
else slides.css({ marginRight: `${spaceBetween}px` });
|
||||
} else slides.css({ marginBottom: `${spaceBetween}px` });
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Utils.extend(swiper, {
|
||||
slides,
|
||||
snapGrid,
|
||||
slidesGrid,
|
||||
slidesSizesGrid,
|
||||
});
|
||||
|
||||
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 || params.watchSlidesVisibility) {
|
||||
swiper.updateSlidesOffset();
|
||||
}
|
||||
}
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
|
||||
const {
|
||||
slides, params, $wrapperEl, activeIndex, realIndex,
|
||||
} = swiper;
|
||||
const isVirtual = swiper.virtual && params.virtual.enabled;
|
||||
|
||||
slides.removeClass(`${params.slideActiveClass} ${params.slideNextClass} ${params.slidePrevClass} ${params.slideDuplicateActiveClass} ${params.slideDuplicateNextClass} ${params.slideDuplicatePrevClass}`);
|
||||
|
||||
let activeSlide;
|
||||
if (isVirtual) {
|
||||
activeSlide = swiper.$wrapperEl.find(`.${params.slideClass}[data-swiper-slide-index="${activeIndex}"]`);
|
||||
} else {
|
||||
activeSlide = slides.eq(activeIndex);
|
||||
}
|
||||
|
||||
// Active classes
|
||||
activeSlide.addClass(params.slideActiveClass);
|
||||
|
||||
if (params.loop) {
|
||||
// Duplicate to all looped slides
|
||||
if (activeSlide.hasClass(params.slideDuplicateClass)) {
|
||||
$wrapperEl
|
||||
.children(`.${params.slideClass}:not(.${params.slideDuplicateClass})[data-swiper-slide-index="${realIndex}"]`)
|
||||
.addClass(params.slideDuplicateActiveClass);
|
||||
} else {
|
||||
$wrapperEl
|
||||
.children(`.${params.slideClass}.${params.slideDuplicateClass}[data-swiper-slide-index="${realIndex}"]`)
|
||||
.addClass(params.slideDuplicateActiveClass);
|
||||
}
|
||||
}
|
||||
// Next Slide
|
||||
let nextSlide = activeSlide.nextAll(`.${params.slideClass}`).eq(0).addClass(params.slideNextClass);
|
||||
if (params.loop && nextSlide.length === 0) {
|
||||
nextSlide = slides.eq(0);
|
||||
nextSlide.addClass(params.slideNextClass);
|
||||
}
|
||||
// Prev Slide
|
||||
let prevSlide = activeSlide.prevAll(`.${params.slideClass}`).eq(0).addClass(params.slidePrevClass);
|
||||
if (params.loop && prevSlide.length === 0) {
|
||||
prevSlide = slides.eq(-1);
|
||||
prevSlide.addClass(params.slidePrevClass);
|
||||
}
|
||||
if (params.loop) {
|
||||
// Duplicate to all looped slides
|
||||
if (nextSlide.hasClass(params.slideDuplicateClass)) {
|
||||
$wrapperEl
|
||||
.children(`.${params.slideClass}:not(.${params.slideDuplicateClass})[data-swiper-slide-index="${nextSlide.attr('data-swiper-slide-index')}"]`)
|
||||
.addClass(params.slideDuplicateNextClass);
|
||||
} else {
|
||||
$wrapperEl
|
||||
.children(`.${params.slideClass}.${params.slideDuplicateClass}[data-swiper-slide-index="${nextSlide.attr('data-swiper-slide-index')}"]`)
|
||||
.addClass(params.slideDuplicateNextClass);
|
||||
}
|
||||
if (prevSlide.hasClass(params.slideDuplicateClass)) {
|
||||
$wrapperEl
|
||||
.children(`.${params.slideClass}:not(.${params.slideDuplicateClass})[data-swiper-slide-index="${prevSlide.attr('data-swiper-slide-index')}"]`)
|
||||
.addClass(params.slideDuplicatePrevClass);
|
||||
} else {
|
||||
$wrapperEl
|
||||
.children(`.${params.slideClass}.${params.slideDuplicateClass}[data-swiper-slide-index="${prevSlide.attr('data-swiper-slide-index')}"]`)
|
||||
.addClass(params.slideDuplicatePrevClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
export default function () {
|
||||
const swiper = this;
|
||||
const slides = swiper.slides;
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
slides[i].swiperSlideOffset = swiper.isHorizontal() ? slides[i].offsetLeft : slides[i].offsetTop;
|
||||
}
|
||||
}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import $ from '../../../utils/dom';
|
||||
|
||||
export default function (translate = (this && this.translate) || 0) {
|
||||
const swiper = this;
|
||||
const params = swiper.params;
|
||||
|
||||
const { slides, rtlTranslate: rtl } = swiper;
|
||||
|
||||
if (slides.length === 0) return;
|
||||
if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset();
|
||||
|
||||
let offsetCenter = -translate;
|
||||
if (rtl) offsetCenter = translate;
|
||||
|
||||
// Visible Slides
|
||||
slides.removeClass(params.slideVisibleClass);
|
||||
|
||||
swiper.visibleSlidesIndexes = [];
|
||||
swiper.visibleSlides = [];
|
||||
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const slide = slides[i];
|
||||
const slideProgress = (
|
||||
(offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0)) - slide.swiperSlideOffset
|
||||
) / (slide.swiperSlideSize + params.spaceBetween);
|
||||
if (params.watchSlidesVisibility) {
|
||||
const slideBefore = -(offsetCenter - slide.swiperSlideOffset);
|
||||
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.eq(i).addClass(params.slideVisibleClass);
|
||||
}
|
||||
}
|
||||
slide.progress = rtl ? -slideProgress : slideProgress;
|
||||
}
|
||||
swiper.visibleSlides = $(swiper.visibleSlides);
|
||||
}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
import $ from '../../utils/dom';
|
||||
import Support from '../../utils/support';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Coverflow = {
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
const {
|
||||
width: swiperWidth, height: swiperHeight, slides, $wrapperEl, 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.eq(i);
|
||||
const slideSize = slidesSizesGrid[i];
|
||||
const slideOffset = $slideEl[0].swiperSlideOffset;
|
||||
const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
|
||||
|
||||
let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
|
||||
let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
|
||||
// var rotateZ = 0
|
||||
let translateZ = -translate * Math.abs(offsetMultiplier);
|
||||
|
||||
let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
|
||||
let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
|
||||
|
||||
// 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;
|
||||
|
||||
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
|
||||
|
||||
$slideEl.transform(slideTransform);
|
||||
$slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
|
||||
if (params.slideShadows) {
|
||||
// Set shadows
|
||||
let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
||||
let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
||||
if ($shadowBeforeEl.length === 0) {
|
||||
$shadowBeforeEl = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
|
||||
$slideEl.append($shadowBeforeEl);
|
||||
}
|
||||
if ($shadowAfterEl.length === 0) {
|
||||
$shadowAfterEl = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
|
||||
$slideEl.append($shadowAfterEl);
|
||||
}
|
||||
if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
|
||||
if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Set correct perspective for IE10
|
||||
if (Support.pointerEvents || Support.prefixedPointerEvents) {
|
||||
const ws = $wrapperEl[0].style;
|
||||
ws.perspectiveOrigin = `${center}px 50%`;
|
||||
}
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
swiper.slides
|
||||
.transition(duration)
|
||||
.find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
|
||||
.transition(duration);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'effect-coverflow',
|
||||
params: {
|
||||
coverflowEffect: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows: true,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
coverflowEffect: {
|
||||
setTranslate: Coverflow.setTranslate.bind(swiper),
|
||||
setTransition: Coverflow.setTransition.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
beforeInit() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'coverflow') return;
|
||||
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
|
||||
|
||||
swiper.params.watchSlidesProgress = true;
|
||||
swiper.originalParams.watchSlidesProgress = true;
|
||||
},
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'coverflow') return;
|
||||
swiper.coverflowEffect.setTranslate();
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'coverflow') return;
|
||||
swiper.coverflowEffect.setTransition(duration);
|
||||
},
|
||||
},
|
||||
};
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
.swiper-container-coverflow {
|
||||
.swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
-ms-perspective: 1200px;
|
||||
}
|
||||
}
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
.swiper-container-coverflow {
|
||||
.swiper-wrapper {
|
||||
/* Windows 8 IE 10 fix */
|
||||
-ms-perspective: 1200px;
|
||||
}
|
||||
}
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
import Browser from '../../utils/browser';
|
||||
|
||||
const Cube = {
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
const {
|
||||
$el, $wrapperEl, slides, width: swiperWidth, height: swiperHeight, rtlTranslate: rtl, size: swiperSize,
|
||||
} = swiper;
|
||||
const params = swiper.params.cubeEffect;
|
||||
const isHorizontal = swiper.isHorizontal();
|
||||
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
||||
let wrapperRotate = 0;
|
||||
let $cubeShadowEl;
|
||||
if (params.shadow) {
|
||||
if (isHorizontal) {
|
||||
$cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');
|
||||
if ($cubeShadowEl.length === 0) {
|
||||
$cubeShadowEl = $('<div class="swiper-cube-shadow"></div>');
|
||||
$wrapperEl.append($cubeShadowEl);
|
||||
}
|
||||
$cubeShadowEl.css({ height: `${swiperWidth}px` });
|
||||
} else {
|
||||
$cubeShadowEl = $el.find('.swiper-cube-shadow');
|
||||
if ($cubeShadowEl.length === 0) {
|
||||
$cubeShadowEl = $('<div class="swiper-cube-shadow"></div>');
|
||||
$el.append($cubeShadowEl);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const $slideEl = slides.eq(i);
|
||||
let slideIndex = i;
|
||||
if (isVirtual) {
|
||||
slideIndex = parseInt($slideEl.attr('data-swiper-slide-index'), 10);
|
||||
}
|
||||
let slideAngle = slideIndex * 90;
|
||||
let round = Math.floor(slideAngle / 360);
|
||||
if (rtl) {
|
||||
slideAngle = -slideAngle;
|
||||
round = Math.floor(-slideAngle / 360);
|
||||
}
|
||||
const progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
|
||||
let tx = 0;
|
||||
let ty = 0;
|
||||
let tz = 0;
|
||||
if (slideIndex % 4 === 0) {
|
||||
tx = -round * 4 * swiperSize;
|
||||
tz = 0;
|
||||
} else if ((slideIndex - 1) % 4 === 0) {
|
||||
tx = 0;
|
||||
tz = -round * 4 * swiperSize;
|
||||
} else if ((slideIndex - 2) % 4 === 0) {
|
||||
tx = swiperSize + (round * 4 * swiperSize);
|
||||
tz = swiperSize;
|
||||
} else if ((slideIndex - 3) % 4 === 0) {
|
||||
tx = -swiperSize;
|
||||
tz = (3 * swiperSize) + (swiperSize * 4 * round);
|
||||
}
|
||||
if (rtl) {
|
||||
tx = -tx;
|
||||
}
|
||||
|
||||
if (!isHorizontal) {
|
||||
ty = tx;
|
||||
tx = 0;
|
||||
}
|
||||
|
||||
const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${isHorizontal ? slideAngle : 0}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
|
||||
if (progress <= 1 && progress > -1) {
|
||||
wrapperRotate = (slideIndex * 90) + (progress * 90);
|
||||
if (rtl) wrapperRotate = (-slideIndex * 90) - (progress * 90);
|
||||
}
|
||||
$slideEl.transform(transform);
|
||||
if (params.slideShadows) {
|
||||
// Set shadows
|
||||
let shadowBefore = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
||||
let shadowAfter = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
||||
if (shadowBefore.length === 0) {
|
||||
shadowBefore = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
|
||||
$slideEl.append(shadowBefore);
|
||||
}
|
||||
if (shadowAfter.length === 0) {
|
||||
shadowAfter = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
|
||||
$slideEl.append(shadowAfter);
|
||||
}
|
||||
if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
|
||||
if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
|
||||
}
|
||||
}
|
||||
$wrapperEl.css({
|
||||
'-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,
|
||||
'-moz-transform-origin': `50% 50% -${swiperSize / 2}px`,
|
||||
'-ms-transform-origin': `50% 50% -${swiperSize / 2}px`,
|
||||
'transform-origin': `50% 50% -${swiperSize / 2}px`,
|
||||
});
|
||||
|
||||
if (params.shadow) {
|
||||
if (isHorizontal) {
|
||||
$cubeShadowEl.transform(`translate3d(0px, ${(swiperWidth / 2) + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`);
|
||||
} else {
|
||||
const shadowAngle = Math.abs(wrapperRotate) - (Math.floor(Math.abs(wrapperRotate) / 90) * 90);
|
||||
const multiplier = 1.5 - (
|
||||
(Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2)
|
||||
+ (Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2)
|
||||
);
|
||||
const scale1 = params.shadowScale;
|
||||
const scale2 = params.shadowScale / multiplier;
|
||||
const offset = params.shadowOffset;
|
||||
$cubeShadowEl.transform(`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${(swiperHeight / 2) + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-90deg)`);
|
||||
}
|
||||
}
|
||||
const zFactor = (Browser.isSafari || Browser.isUiWebView) ? (-swiperSize / 2) : 0;
|
||||
$wrapperEl
|
||||
.transform(`translate3d(0px,0,${zFactor}px) rotateX(${swiper.isHorizontal() ? 0 : wrapperRotate}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`);
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
const { $el, slides } = swiper;
|
||||
slides
|
||||
.transition(duration)
|
||||
.find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
|
||||
.transition(duration);
|
||||
if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
|
||||
$el.find('.swiper-cube-shadow').transition(duration);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'effect-cube',
|
||||
params: {
|
||||
cubeEffect: {
|
||||
slideShadows: true,
|
||||
shadow: true,
|
||||
shadowOffset: 20,
|
||||
shadowScale: 0.94,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
cubeEffect: {
|
||||
setTranslate: Cube.setTranslate.bind(swiper),
|
||||
setTransition: Cube.setTransition.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
beforeInit() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'cube') return;
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
|
||||
const overwriteParams = {
|
||||
slidesPerView: 1,
|
||||
slidesPerColumn: 1,
|
||||
slidesPerGroup: 1,
|
||||
watchSlidesProgress: true,
|
||||
resistanceRatio: 0,
|
||||
spaceBetween: 0,
|
||||
centeredSlides: false,
|
||||
virtualTranslate: true,
|
||||
};
|
||||
Utils.extend(swiper.params, overwriteParams);
|
||||
Utils.extend(swiper.originalParams, overwriteParams);
|
||||
},
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'cube') return;
|
||||
swiper.cubeEffect.setTranslate();
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'cube') return;
|
||||
swiper.cubeEffect.setTransition(duration);
|
||||
},
|
||||
},
|
||||
};
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
.swiper-container-cube {
|
||||
overflow: visible;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&.swiper-container-rtl .swiper-slide {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
.swiper-slide-active {
|
||||
&, & .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active, .swiper-slide-next, .swiper-slide-prev, .swiper-slide-next + .swiper-slide {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
.swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
.swiper-container-cube {
|
||||
overflow: visible;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
transform-origin: 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&.swiper-container-rtl .swiper-slide {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
.swiper-slide-active {
|
||||
&, & .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active, .swiper-slide-next, .swiper-slide-prev, .swiper-slide-next + .swiper-slide {
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
.swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.swiper-cube-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.6;
|
||||
-webkit-filter: blur(50px);
|
||||
filter: blur(50px);
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Fade = {
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
const { slides } = swiper;
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const $slideEl = swiper.slides.eq(i);
|
||||
const offset = $slideEl[0].swiperSlideOffset;
|
||||
let tx = -offset;
|
||||
if (!swiper.params.virtualTranslate) tx -= swiper.translate;
|
||||
let ty = 0;
|
||||
if (!swiper.isHorizontal()) {
|
||||
ty = tx;
|
||||
tx = 0;
|
||||
}
|
||||
const slideOpacity = swiper.params.fadeEffect.crossFade
|
||||
? Math.max(1 - Math.abs($slideEl[0].progress), 0)
|
||||
: 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);
|
||||
$slideEl
|
||||
.css({
|
||||
opacity: slideOpacity,
|
||||
})
|
||||
.transform(`translate3d(${tx}px, ${ty}px, 0px)`);
|
||||
}
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
const { slides, $wrapperEl } = swiper;
|
||||
slides.transition(duration);
|
||||
if (swiper.params.virtualTranslate && duration !== 0) {
|
||||
let eventTriggered = false;
|
||||
slides.transitionEnd(() => {
|
||||
if (eventTriggered) return;
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
eventTriggered = true;
|
||||
swiper.animating = false;
|
||||
const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
|
||||
for (let i = 0; i < triggerEvents.length; i += 1) {
|
||||
$wrapperEl.trigger(triggerEvents[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'effect-fade',
|
||||
params: {
|
||||
fadeEffect: {
|
||||
crossFade: false,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
fadeEffect: {
|
||||
setTranslate: Fade.setTranslate.bind(swiper),
|
||||
setTransition: Fade.setTransition.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
beforeInit() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'fade') return;
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
|
||||
const overwriteParams = {
|
||||
slidesPerView: 1,
|
||||
slidesPerColumn: 1,
|
||||
slidesPerGroup: 1,
|
||||
watchSlidesProgress: true,
|
||||
spaceBetween: 0,
|
||||
virtualTranslate: true,
|
||||
};
|
||||
Utils.extend(swiper.params, overwriteParams);
|
||||
Utils.extend(swiper.originalParams, overwriteParams);
|
||||
},
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'fade') return;
|
||||
swiper.fadeEffect.setTranslate();
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'fade') return;
|
||||
swiper.fadeEffect.setTransition(duration);
|
||||
},
|
||||
},
|
||||
};
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
.swiper-container-fade {
|
||||
&.swiper-container-free-mode {
|
||||
.swiper-slide {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
transition-property: opacity;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active {
|
||||
&, & .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
.swiper-container-fade {
|
||||
&.swiper-container-free-mode {
|
||||
.swiper-slide {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
transition-property: opacity;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active {
|
||||
&, & .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Flip = {
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
const { slides, rtlTranslate: rtl } = swiper;
|
||||
for (let i = 0; i < slides.length; i += 1) {
|
||||
const $slideEl = slides.eq(i);
|
||||
let progress = $slideEl[0].progress;
|
||||
if (swiper.params.flipEffect.limitRotation) {
|
||||
progress = Math.max(Math.min($slideEl[0].progress, 1), -1);
|
||||
}
|
||||
const offset = $slideEl[0].swiperSlideOffset;
|
||||
const rotate = -180 * progress;
|
||||
let rotateY = rotate;
|
||||
let rotateX = 0;
|
||||
let tx = -offset;
|
||||
let ty = 0;
|
||||
if (!swiper.isHorizontal()) {
|
||||
ty = tx;
|
||||
tx = 0;
|
||||
rotateX = -rotateY;
|
||||
rotateY = 0;
|
||||
} else if (rtl) {
|
||||
rotateY = -rotateY;
|
||||
}
|
||||
|
||||
$slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
|
||||
|
||||
if (swiper.params.flipEffect.slideShadows) {
|
||||
// Set shadows
|
||||
let shadowBefore = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
||||
let shadowAfter = swiper.isHorizontal() ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
||||
if (shadowBefore.length === 0) {
|
||||
shadowBefore = $(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`);
|
||||
$slideEl.append(shadowBefore);
|
||||
}
|
||||
if (shadowAfter.length === 0) {
|
||||
shadowAfter = $(`<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`);
|
||||
$slideEl.append(shadowAfter);
|
||||
}
|
||||
if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
|
||||
if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
|
||||
}
|
||||
$slideEl
|
||||
.transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
|
||||
}
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
const { slides, activeIndex, $wrapperEl } = swiper;
|
||||
slides
|
||||
.transition(duration)
|
||||
.find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
|
||||
.transition(duration);
|
||||
if (swiper.params.virtualTranslate && duration !== 0) {
|
||||
let eventTriggered = false;
|
||||
// eslint-disable-next-line
|
||||
slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {
|
||||
if (eventTriggered) return;
|
||||
if (!swiper || swiper.destroyed) return;
|
||||
// if (!$(this).hasClass(swiper.params.slideActiveClass)) return;
|
||||
eventTriggered = true;
|
||||
swiper.animating = false;
|
||||
const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
|
||||
for (let i = 0; i < triggerEvents.length; i += 1) {
|
||||
$wrapperEl.trigger(triggerEvents[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'effect-flip',
|
||||
params: {
|
||||
flipEffect: {
|
||||
slideShadows: true,
|
||||
limitRotation: true,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
flipEffect: {
|
||||
setTranslate: Flip.setTranslate.bind(swiper),
|
||||
setTransition: Flip.setTransition.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
beforeInit() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'flip') return;
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);
|
||||
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
|
||||
const overwriteParams = {
|
||||
slidesPerView: 1,
|
||||
slidesPerColumn: 1,
|
||||
slidesPerGroup: 1,
|
||||
watchSlidesProgress: true,
|
||||
spaceBetween: 0,
|
||||
virtualTranslate: true,
|
||||
};
|
||||
Utils.extend(swiper.params, overwriteParams);
|
||||
Utils.extend(swiper.originalParams, overwriteParams);
|
||||
},
|
||||
setTranslate() {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'flip') return;
|
||||
swiper.flipEffect.setTranslate();
|
||||
},
|
||||
setTransition(duration) {
|
||||
const swiper = this;
|
||||
if (swiper.params.effect !== 'flip') return;
|
||||
swiper.flipEffect.setTransition(duration);
|
||||
},
|
||||
},
|
||||
};
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active {
|
||||
&, & .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
.swiper-container-flip {
|
||||
overflow: visible;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
.swiper-slide {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.swiper-slide-active {
|
||||
&, & .swiper-slide-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right {
|
||||
z-index: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
+95
@@ -0,0 +1,95 @@
|
||||
import { window, document } from 'ssr-window';
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const HashNavigation = {
|
||||
onHashCange() {
|
||||
const swiper = this;
|
||||
const newHash = document.location.hash.replace('#', '');
|
||||
const activeSlideHash = swiper.slides.eq(swiper.activeIndex).attr('data-hash');
|
||||
if (newHash !== activeSlideHash) {
|
||||
const newIndex = swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-hash="${newHash}"]`).index();
|
||||
if (typeof newIndex === 'undefined') return;
|
||||
swiper.slideTo(newIndex);
|
||||
}
|
||||
},
|
||||
setHash() {
|
||||
const swiper = this;
|
||||
if (!swiper.hashNavigation.initialized || !swiper.params.hashNavigation.enabled) return;
|
||||
if (swiper.params.hashNavigation.replaceState && window.history && window.history.replaceState) {
|
||||
window.history.replaceState(null, null, (`#${swiper.slides.eq(swiper.activeIndex).attr('data-hash')}` || ''));
|
||||
} else {
|
||||
const slide = swiper.slides.eq(swiper.activeIndex);
|
||||
const hash = slide.attr('data-hash') || slide.attr('data-history');
|
||||
document.location.hash = hash || '';
|
||||
}
|
||||
},
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.hashNavigation.enabled || (swiper.params.history && swiper.params.history.enabled)) return;
|
||||
swiper.hashNavigation.initialized = true;
|
||||
const hash = document.location.hash.replace('#', '');
|
||||
if (hash) {
|
||||
const speed = 0;
|
||||
for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
|
||||
const slide = swiper.slides.eq(i);
|
||||
const slideHash = slide.attr('data-hash') || slide.attr('data-history');
|
||||
if (slideHash === hash && !slide.hasClass(swiper.params.slideDuplicateClass)) {
|
||||
const index = slide.index();
|
||||
swiper.slideTo(index, speed, swiper.params.runCallbacksOnInit, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (swiper.params.hashNavigation.watchState) {
|
||||
$(window).on('hashchange', swiper.hashNavigation.onHashCange);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.params.hashNavigation.watchState) {
|
||||
$(window).off('hashchange', swiper.hashNavigation.onHashCange);
|
||||
}
|
||||
},
|
||||
};
|
||||
export default {
|
||||
name: 'hash-navigation',
|
||||
params: {
|
||||
hashNavigation: {
|
||||
enabled: false,
|
||||
replaceState: false,
|
||||
watchState: false,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
hashNavigation: {
|
||||
initialized: false,
|
||||
init: HashNavigation.init.bind(swiper),
|
||||
destroy: HashNavigation.destroy.bind(swiper),
|
||||
setHash: HashNavigation.setHash.bind(swiper),
|
||||
onHashCange: HashNavigation.onHashCange.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.params.hashNavigation.enabled) {
|
||||
swiper.hashNavigation.init();
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.params.hashNavigation.enabled) {
|
||||
swiper.hashNavigation.destroy();
|
||||
}
|
||||
},
|
||||
transitionEnd() {
|
||||
const swiper = this;
|
||||
if (swiper.hashNavigation.initialized) {
|
||||
swiper.hashNavigation.setHash();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
import { window } from 'ssr-window';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const History = {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.history) return;
|
||||
if (!window.history || !window.history.pushState) {
|
||||
swiper.params.history.enabled = false;
|
||||
swiper.params.hashNavigation.enabled = true;
|
||||
return;
|
||||
}
|
||||
const history = swiper.history;
|
||||
history.initialized = true;
|
||||
history.paths = History.getPathValues();
|
||||
if (!history.paths.key && !history.paths.value) return;
|
||||
history.scrollToSlide(0, history.paths.value, swiper.params.runCallbacksOnInit);
|
||||
if (!swiper.params.history.replaceState) {
|
||||
window.addEventListener('popstate', swiper.history.setHistoryPopState);
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (!swiper.params.history.replaceState) {
|
||||
window.removeEventListener('popstate', swiper.history.setHistoryPopState);
|
||||
}
|
||||
},
|
||||
setHistoryPopState() {
|
||||
const swiper = this;
|
||||
swiper.history.paths = History.getPathValues();
|
||||
swiper.history.scrollToSlide(swiper.params.speed, swiper.history.paths.value, false);
|
||||
},
|
||||
getPathValues() {
|
||||
const pathArray = window.location.pathname.slice(1).split('/').filter((part) => part !== '');
|
||||
const total = pathArray.length;
|
||||
const key = pathArray[total - 2];
|
||||
const value = pathArray[total - 1];
|
||||
return { key, value };
|
||||
},
|
||||
setHistory(key, index) {
|
||||
const swiper = this;
|
||||
if (!swiper.history.initialized || !swiper.params.history.enabled) return;
|
||||
const slide = swiper.slides.eq(index);
|
||||
let value = History.slugify(slide.attr('data-history'));
|
||||
if (!window.location.pathname.includes(key)) {
|
||||
value = `${key}/${value}`;
|
||||
}
|
||||
const currentState = window.history.state;
|
||||
if (currentState && currentState.value === value) {
|
||||
return;
|
||||
}
|
||||
if (swiper.params.history.replaceState) {
|
||||
window.history.replaceState({ value }, null, value);
|
||||
} else {
|
||||
window.history.pushState({ value }, null, value);
|
||||
}
|
||||
},
|
||||
slugify(text) {
|
||||
return text.toString()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^\w-]+/g, '')
|
||||
.replace(/--+/g, '-')
|
||||
.replace(/^-+/, '')
|
||||
.replace(/-+$/, '');
|
||||
},
|
||||
scrollToSlide(speed, value, runCallbacks) {
|
||||
const swiper = this;
|
||||
if (value) {
|
||||
for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
|
||||
const slide = swiper.slides.eq(i);
|
||||
const slideHistory = History.slugify(slide.attr('data-history'));
|
||||
if (slideHistory === value && !slide.hasClass(swiper.params.slideDuplicateClass)) {
|
||||
const index = slide.index();
|
||||
swiper.slideTo(index, speed, runCallbacks);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
swiper.slideTo(0, speed, runCallbacks);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'history',
|
||||
params: {
|
||||
history: {
|
||||
enabled: false,
|
||||
replaceState: false,
|
||||
key: 'slides',
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
history: {
|
||||
init: History.init.bind(swiper),
|
||||
setHistory: History.setHistory.bind(swiper),
|
||||
setHistoryPopState: History.setHistoryPopState.bind(swiper),
|
||||
scrollToSlide: History.scrollToSlide.bind(swiper),
|
||||
destroy: History.destroy.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.params.history.enabled) {
|
||||
swiper.history.init();
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.params.history.enabled) {
|
||||
swiper.history.destroy();
|
||||
}
|
||||
},
|
||||
transitionEnd() {
|
||||
const swiper = this;
|
||||
if (swiper.history.initialized) {
|
||||
swiper.history.setHistory(swiper.params.history.key, swiper.activeIndex);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
import { window, document } from 'ssr-window';
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Keyboard = {
|
||||
handle(event) {
|
||||
const swiper = this;
|
||||
const { rtlTranslate: rtl } = swiper;
|
||||
let e = event;
|
||||
if (e.originalEvent) e = e.originalEvent; // jquery fix
|
||||
const kc = e.keyCode || e.charCode;
|
||||
// Directions locks
|
||||
if (!swiper.allowSlideNext && ((swiper.isHorizontal() && kc === 39) || (swiper.isVertical() && kc === 40) || kc === 34)) {
|
||||
return false;
|
||||
}
|
||||
if (!swiper.allowSlidePrev && ((swiper.isHorizontal() && kc === 37) || (swiper.isVertical() && kc === 38) || kc === 33)) {
|
||||
return false;
|
||||
}
|
||||
if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
|
||||
return undefined;
|
||||
}
|
||||
if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
|
||||
return undefined;
|
||||
}
|
||||
if (swiper.params.keyboard.onlyInViewport && (kc === 33 || kc === 34 || kc === 37 || kc === 39 || kc === 38 || kc === 40)) {
|
||||
let inView = false;
|
||||
// Check that swiper should be inside of visible area of window
|
||||
if (swiper.$el.parents(`.${swiper.params.slideClass}`).length > 0 && swiper.$el.parents(`.${swiper.params.slideActiveClass}`).length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
const swiperOffset = swiper.$el.offset();
|
||||
if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
|
||||
const swiperCoord = [
|
||||
[swiperOffset.left, swiperOffset.top],
|
||||
[swiperOffset.left + swiper.width, swiperOffset.top],
|
||||
[swiperOffset.left, swiperOffset.top + swiper.height],
|
||||
[swiperOffset.left + swiper.width, swiperOffset.top + swiper.height],
|
||||
];
|
||||
for (let i = 0; i < swiperCoord.length; i += 1) {
|
||||
const point = swiperCoord[i];
|
||||
if (
|
||||
point[0] >= 0 && point[0] <= windowWidth
|
||||
&& point[1] >= 0 && point[1] <= windowHeight
|
||||
) {
|
||||
inView = true;
|
||||
}
|
||||
}
|
||||
if (!inView) return undefined;
|
||||
}
|
||||
if (swiper.isHorizontal()) {
|
||||
if (kc === 33 || kc === 34 || kc === 37 || kc === 39) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
else e.returnValue = false;
|
||||
}
|
||||
if (((kc === 34 || kc === 39) && !rtl) || ((kc === 33 || kc === 37) && rtl)) swiper.slideNext();
|
||||
if (((kc === 33 || kc === 37) && !rtl) || ((kc === 34 || kc === 39) && rtl)) swiper.slidePrev();
|
||||
} else {
|
||||
if (kc === 33 || kc === 34 || kc === 38 || kc === 40) {
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
else e.returnValue = false;
|
||||
}
|
||||
if (kc === 34 || kc === 40) swiper.slideNext();
|
||||
if (kc === 33 || kc === 38) swiper.slidePrev();
|
||||
}
|
||||
swiper.emit('keyPress', kc);
|
||||
return undefined;
|
||||
},
|
||||
enable() {
|
||||
const swiper = this;
|
||||
if (swiper.keyboard.enabled) return;
|
||||
$(document).on('keydown', swiper.keyboard.handle);
|
||||
swiper.keyboard.enabled = true;
|
||||
},
|
||||
disable() {
|
||||
const swiper = this;
|
||||
if (!swiper.keyboard.enabled) return;
|
||||
$(document).off('keydown', swiper.keyboard.handle);
|
||||
swiper.keyboard.enabled = false;
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'keyboard',
|
||||
params: {
|
||||
keyboard: {
|
||||
enabled: false,
|
||||
onlyInViewport: true,
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
keyboard: {
|
||||
enabled: false,
|
||||
enable: Keyboard.enable.bind(swiper),
|
||||
disable: Keyboard.disable.bind(swiper),
|
||||
handle: Keyboard.handle.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.params.keyboard.enabled) {
|
||||
swiper.keyboard.enable();
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.keyboard.enabled) {
|
||||
swiper.keyboard.disable();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
+206
@@ -0,0 +1,206 @@
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Lazy = {
|
||||
loadInSlide(index, loadInDuplicate = true) {
|
||||
const swiper = this;
|
||||
const params = swiper.params.lazy;
|
||||
if (typeof index === 'undefined') return;
|
||||
if (swiper.slides.length === 0) return;
|
||||
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
|
||||
|
||||
const $slideEl = isVirtual
|
||||
? swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-swiper-slide-index="${index}"]`)
|
||||
: swiper.slides.eq(index);
|
||||
|
||||
let $images = $slideEl.find(`.${params.elementClass}:not(.${params.loadedClass}):not(.${params.loadingClass})`);
|
||||
if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) {
|
||||
$images = $images.add($slideEl[0]);
|
||||
}
|
||||
if ($images.length === 0) return;
|
||||
|
||||
$images.each((imageIndex, imageEl) => {
|
||||
const $imageEl = $(imageEl);
|
||||
$imageEl.addClass(params.loadingClass);
|
||||
|
||||
const background = $imageEl.attr('data-background');
|
||||
const src = $imageEl.attr('data-src');
|
||||
const srcset = $imageEl.attr('data-srcset');
|
||||
const sizes = $imageEl.attr('data-sizes');
|
||||
|
||||
swiper.loadImage($imageEl[0], (src || background), srcset, sizes, false, () => {
|
||||
if (typeof swiper === 'undefined' || swiper === null || !swiper || (swiper && !swiper.params) || swiper.destroyed) return;
|
||||
if (background) {
|
||||
$imageEl.css('background-image', `url("${background}")`);
|
||||
$imageEl.removeAttr('data-background');
|
||||
} else {
|
||||
if (srcset) {
|
||||
$imageEl.attr('srcset', srcset);
|
||||
$imageEl.removeAttr('data-srcset');
|
||||
}
|
||||
if (sizes) {
|
||||
$imageEl.attr('sizes', sizes);
|
||||
$imageEl.removeAttr('data-sizes');
|
||||
}
|
||||
if (src) {
|
||||
$imageEl.attr('src', src);
|
||||
$imageEl.removeAttr('data-src');
|
||||
}
|
||||
}
|
||||
|
||||
$imageEl.addClass(params.loadedClass).removeClass(params.loadingClass);
|
||||
$slideEl.find(`.${params.preloaderClass}`).remove();
|
||||
if (swiper.params.loop && loadInDuplicate) {
|
||||
const slideOriginalIndex = $slideEl.attr('data-swiper-slide-index');
|
||||
if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) {
|
||||
const originalSlide = swiper.$wrapperEl.children(`[data-swiper-slide-index="${slideOriginalIndex}"]:not(.${swiper.params.slideDuplicateClass})`);
|
||||
swiper.lazy.loadInSlide(originalSlide.index(), false);
|
||||
} else {
|
||||
const duplicatedSlide = swiper.$wrapperEl.children(`.${swiper.params.slideDuplicateClass}[data-swiper-slide-index="${slideOriginalIndex}"]`);
|
||||
swiper.lazy.loadInSlide(duplicatedSlide.index(), false);
|
||||
}
|
||||
}
|
||||
swiper.emit('lazyImageReady', $slideEl[0], $imageEl[0]);
|
||||
});
|
||||
|
||||
swiper.emit('lazyImageLoad', $slideEl[0], $imageEl[0]);
|
||||
});
|
||||
},
|
||||
load() {
|
||||
const swiper = this;
|
||||
const {
|
||||
$wrapperEl, params: swiperParams, slides, activeIndex,
|
||||
} = swiper;
|
||||
const isVirtual = swiper.virtual && swiperParams.virtual.enabled;
|
||||
const params = swiperParams.lazy;
|
||||
|
||||
let slidesPerView = swiperParams.slidesPerView;
|
||||
if (slidesPerView === 'auto') {
|
||||
slidesPerView = 0;
|
||||
}
|
||||
|
||||
function slideExist(index) {
|
||||
if (isVirtual) {
|
||||
if ($wrapperEl.children(`.${swiperParams.slideClass}[data-swiper-slide-index="${index}"]`).length) {
|
||||
return true;
|
||||
}
|
||||
} else if (slides[index]) return true;
|
||||
return false;
|
||||
}
|
||||
function slideIndex(slideEl) {
|
||||
if (isVirtual) {
|
||||
return $(slideEl).attr('data-swiper-slide-index');
|
||||
}
|
||||
return $(slideEl).index();
|
||||
}
|
||||
|
||||
if (!swiper.lazy.initialImageLoaded) swiper.lazy.initialImageLoaded = true;
|
||||
if (swiper.params.watchSlidesVisibility) {
|
||||
$wrapperEl.children(`.${swiperParams.slideVisibleClass}`).each((elIndex, slideEl) => {
|
||||
const index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(slideEl).index();
|
||||
swiper.lazy.loadInSlide(index);
|
||||
});
|
||||
} else if (slidesPerView > 1) {
|
||||
for (let i = activeIndex; i < activeIndex + slidesPerView; i += 1) {
|
||||
if (slideExist(i)) swiper.lazy.loadInSlide(i);
|
||||
}
|
||||
} else {
|
||||
swiper.lazy.loadInSlide(activeIndex);
|
||||
}
|
||||
if (params.loadPrevNext) {
|
||||
if (slidesPerView > 1 || (params.loadPrevNextAmount && params.loadPrevNextAmount > 1)) {
|
||||
const amount = params.loadPrevNextAmount;
|
||||
const spv = slidesPerView;
|
||||
const maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);
|
||||
const minIndex = Math.max(activeIndex - Math.max(spv, amount), 0);
|
||||
// Next Slides
|
||||
for (let i = activeIndex + slidesPerView; i < maxIndex; i += 1) {
|
||||
if (slideExist(i)) swiper.lazy.loadInSlide(i);
|
||||
}
|
||||
// Prev Slides
|
||||
for (let i = minIndex; i < activeIndex; i += 1) {
|
||||
if (slideExist(i)) swiper.lazy.loadInSlide(i);
|
||||
}
|
||||
} else {
|
||||
const nextSlide = $wrapperEl.children(`.${swiperParams.slideNextClass}`);
|
||||
if (nextSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(nextSlide));
|
||||
|
||||
const prevSlide = $wrapperEl.children(`.${swiperParams.slidePrevClass}`);
|
||||
if (prevSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(prevSlide));
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'lazy',
|
||||
params: {
|
||||
lazy: {
|
||||
enabled: false,
|
||||
loadPrevNext: false,
|
||||
loadPrevNextAmount: 1,
|
||||
loadOnTransitionStart: false,
|
||||
|
||||
elementClass: 'swiper-lazy',
|
||||
loadingClass: 'swiper-lazy-loading',
|
||||
loadedClass: 'swiper-lazy-loaded',
|
||||
preloaderClass: 'swiper-lazy-preloader',
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
lazy: {
|
||||
initialImageLoaded: false,
|
||||
load: Lazy.load.bind(swiper),
|
||||
loadInSlide: Lazy.loadInSlide.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
beforeInit() {
|
||||
const swiper = this;
|
||||
if (swiper.params.lazy.enabled && swiper.params.preloadImages) {
|
||||
swiper.params.preloadImages = false;
|
||||
}
|
||||
},
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.params.lazy.enabled && !swiper.params.loop && swiper.params.initialSlide === 0) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
},
|
||||
scroll() {
|
||||
const swiper = this;
|
||||
if (swiper.params.freeMode && !swiper.params.freeModeSticky) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
},
|
||||
resize() {
|
||||
const swiper = this;
|
||||
if (swiper.params.lazy.enabled) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
},
|
||||
scrollbarDragMove() {
|
||||
const swiper = this;
|
||||
if (swiper.params.lazy.enabled) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
},
|
||||
transitionStart() {
|
||||
const swiper = this;
|
||||
if (swiper.params.lazy.enabled) {
|
||||
if (swiper.params.lazy.loadOnTransitionStart || (!swiper.params.lazy.loadOnTransitionStart && !swiper.lazy.initialImageLoaded)) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
}
|
||||
},
|
||||
transitionEnd() {
|
||||
const swiper = this;
|
||||
if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) {
|
||||
swiper.lazy.load();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
/* Preloader */
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
transform-origin: 50%;
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
}
|
||||
.swiper-lazy-preloader:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#6c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
.swiper-lazy-preloader-white:after {
|
||||
.svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
/* Preloader */
|
||||
.swiper-lazy-preloader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -21px;
|
||||
margin-top: -21px;
|
||||
z-index: 10;
|
||||
transform-origin: 50%;
|
||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: swiper-svg-uri("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#6c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader-white:after {
|
||||
background-image: swiper-svg-uri("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
|
||||
}
|
||||
@keyframes swiper-preloader-spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
import { window, document } from 'ssr-window';
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
function isEventSupported() {
|
||||
const eventName = 'onwheel';
|
||||
let isSupported = eventName in document;
|
||||
|
||||
if (!isSupported) {
|
||||
const element = document.createElement('div');
|
||||
element.setAttribute(eventName, 'return;');
|
||||
isSupported = typeof element[eventName] === 'function';
|
||||
}
|
||||
|
||||
if (!isSupported
|
||||
&& document.implementation
|
||||
&& document.implementation.hasFeature
|
||||
// always returns true in newer browsers as per the standard.
|
||||
// @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
|
||||
&& document.implementation.hasFeature('', '') !== true
|
||||
) {
|
||||
// This is the only way to test support for the `wheel` event in IE9+.
|
||||
isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
|
||||
}
|
||||
|
||||
return isSupported;
|
||||
}
|
||||
const Mousewheel = {
|
||||
lastScrollTime: Utils.now(),
|
||||
event: (function getEvent() {
|
||||
if (window.navigator.userAgent.indexOf('firefox') > -1) return 'DOMMouseScroll';
|
||||
return isEventSupported() ? 'wheel' : 'mousewheel';
|
||||
}()),
|
||||
normalize(e) {
|
||||
// Reasonable defaults
|
||||
const PIXEL_STEP = 10;
|
||||
const LINE_HEIGHT = 40;
|
||||
const PAGE_HEIGHT = 800;
|
||||
|
||||
let sX = 0;
|
||||
let sY = 0; // spinX, spinY
|
||||
let pX = 0;
|
||||
let pY = 0; // pixelX, pixelY
|
||||
|
||||
// Legacy
|
||||
if ('detail' in e) {
|
||||
sY = e.detail;
|
||||
}
|
||||
if ('wheelDelta' in e) {
|
||||
sY = -e.wheelDelta / 120;
|
||||
}
|
||||
if ('wheelDeltaY' in e) {
|
||||
sY = -e.wheelDeltaY / 120;
|
||||
}
|
||||
if ('wheelDeltaX' in e) {
|
||||
sX = -e.wheelDeltaX / 120;
|
||||
}
|
||||
|
||||
// side scrolling on FF with DOMMouseScroll
|
||||
if ('axis' in e && e.axis === e.HORIZONTAL_AXIS) {
|
||||
sX = sY;
|
||||
sY = 0;
|
||||
}
|
||||
|
||||
pX = sX * PIXEL_STEP;
|
||||
pY = sY * PIXEL_STEP;
|
||||
|
||||
if ('deltaY' in e) {
|
||||
pY = e.deltaY;
|
||||
}
|
||||
if ('deltaX' in e) {
|
||||
pX = e.deltaX;
|
||||
}
|
||||
|
||||
if ((pX || pY) && e.deltaMode) {
|
||||
if (e.deltaMode === 1) { // delta in LINE units
|
||||
pX *= LINE_HEIGHT;
|
||||
pY *= LINE_HEIGHT;
|
||||
} else { // delta in PAGE units
|
||||
pX *= PAGE_HEIGHT;
|
||||
pY *= PAGE_HEIGHT;
|
||||
}
|
||||
}
|
||||
|
||||
// Fall-back if spin cannot be determined
|
||||
if (pX && !sX) {
|
||||
sX = (pX < 1) ? -1 : 1;
|
||||
}
|
||||
if (pY && !sY) {
|
||||
sY = (pY < 1) ? -1 : 1;
|
||||
}
|
||||
|
||||
return {
|
||||
spinX: sX,
|
||||
spinY: sY,
|
||||
pixelX: pX,
|
||||
pixelY: pY,
|
||||
};
|
||||
},
|
||||
handleMouseEnter() {
|
||||
const swiper = this;
|
||||
swiper.mouseEntered = true;
|
||||
},
|
||||
handleMouseLeave() {
|
||||
const swiper = this;
|
||||
swiper.mouseEntered = false;
|
||||
},
|
||||
handle(event) {
|
||||
let e = event;
|
||||
const swiper = this;
|
||||
const params = swiper.params.mousewheel;
|
||||
|
||||
if (!swiper.mouseEntered && !params.releaseOnEdges) return true;
|
||||
|
||||
if (e.originalEvent) e = e.originalEvent; // jquery fix
|
||||
let delta = 0;
|
||||
const rtlFactor = swiper.rtlTranslate ? -1 : 1;
|
||||
|
||||
const data = Mousewheel.normalize(e);
|
||||
|
||||
if (params.forceToAxis) {
|
||||
if (swiper.isHorizontal()) {
|
||||
if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = data.pixelX * rtlFactor;
|
||||
else return true;
|
||||
} else if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = data.pixelY;
|
||||
else return true;
|
||||
} else {
|
||||
delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? -data.pixelX * rtlFactor : -data.pixelY;
|
||||
}
|
||||
|
||||
if (delta === 0) return true;
|
||||
|
||||
if (params.invert) delta = -delta;
|
||||
|
||||
if (!swiper.params.freeMode) {
|
||||
if (Utils.now() - swiper.mousewheel.lastScrollTime > 60) {
|
||||
if (delta < 0) {
|
||||
if ((!swiper.isEnd || swiper.params.loop) && !swiper.animating) {
|
||||
swiper.slideNext();
|
||||
swiper.emit('scroll', e);
|
||||
} else if (params.releaseOnEdges) return true;
|
||||
} else if ((!swiper.isBeginning || swiper.params.loop) && !swiper.animating) {
|
||||
swiper.slidePrev();
|
||||
swiper.emit('scroll', e);
|
||||
} else if (params.releaseOnEdges) return true;
|
||||
}
|
||||
swiper.mousewheel.lastScrollTime = (new window.Date()).getTime();
|
||||
} else {
|
||||
// Freemode or scrollContainer:
|
||||
if (swiper.params.loop) {
|
||||
swiper.loopFix();
|
||||
}
|
||||
let position = swiper.getTranslate() + (delta * params.sensitivity);
|
||||
const wasBeginning = swiper.isBeginning;
|
||||
const wasEnd = swiper.isEnd;
|
||||
|
||||
if (position >= swiper.minTranslate()) position = swiper.minTranslate();
|
||||
if (position <= swiper.maxTranslate()) position = swiper.maxTranslate();
|
||||
|
||||
swiper.setTransition(0);
|
||||
swiper.setTranslate(position);
|
||||
swiper.updateProgress();
|
||||
swiper.updateActiveIndex();
|
||||
swiper.updateSlidesClasses();
|
||||
|
||||
if ((!wasBeginning && swiper.isBeginning) || (!wasEnd && swiper.isEnd)) {
|
||||
swiper.updateSlidesClasses();
|
||||
}
|
||||
|
||||
if (swiper.params.freeModeSticky) {
|
||||
clearTimeout(swiper.mousewheel.timeout);
|
||||
swiper.mousewheel.timeout = Utils.nextTick(() => {
|
||||
swiper.slideToClosest();
|
||||
}, 300);
|
||||
}
|
||||
// Emit event
|
||||
swiper.emit('scroll', e);
|
||||
|
||||
// Stop autoplay
|
||||
if (swiper.params.autoplay && swiper.params.autoplayDisableOnInteraction) swiper.autoplay.stop();
|
||||
// Return page scroll on edge positions
|
||||
if (position === swiper.minTranslate() || position === swiper.maxTranslate()) return true;
|
||||
}
|
||||
|
||||
if (e.preventDefault) e.preventDefault();
|
||||
else e.returnValue = false;
|
||||
return false;
|
||||
},
|
||||
enable() {
|
||||
const swiper = this;
|
||||
if (!Mousewheel.event) return false;
|
||||
if (swiper.mousewheel.enabled) return false;
|
||||
let target = swiper.$el;
|
||||
if (swiper.params.mousewheel.eventsTarged !== 'container') {
|
||||
target = $(swiper.params.mousewheel.eventsTarged);
|
||||
}
|
||||
target.on('mouseenter', swiper.mousewheel.handleMouseEnter);
|
||||
target.on('mouseleave', swiper.mousewheel.handleMouseLeave);
|
||||
target.on(Mousewheel.event, swiper.mousewheel.handle);
|
||||
swiper.mousewheel.enabled = true;
|
||||
return true;
|
||||
},
|
||||
disable() {
|
||||
const swiper = this;
|
||||
if (!Mousewheel.event) return false;
|
||||
if (!swiper.mousewheel.enabled) return false;
|
||||
let target = swiper.$el;
|
||||
if (swiper.params.mousewheel.eventsTarged !== 'container') {
|
||||
target = $(swiper.params.mousewheel.eventsTarged);
|
||||
}
|
||||
target.off(Mousewheel.event, swiper.mousewheel.handle);
|
||||
swiper.mousewheel.enabled = false;
|
||||
return true;
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'mousewheel',
|
||||
params: {
|
||||
mousewheel: {
|
||||
enabled: false,
|
||||
releaseOnEdges: false,
|
||||
invert: false,
|
||||
forceToAxis: false,
|
||||
sensitivity: 1,
|
||||
eventsTarged: 'container',
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
mousewheel: {
|
||||
enabled: false,
|
||||
enable: Mousewheel.enable.bind(swiper),
|
||||
disable: Mousewheel.disable.bind(swiper),
|
||||
handle: Mousewheel.handle.bind(swiper),
|
||||
handleMouseEnter: Mousewheel.handleMouseEnter.bind(swiper),
|
||||
handleMouseLeave: Mousewheel.handleMouseLeave.bind(swiper),
|
||||
lastScrollTime: Utils.now(),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
if (swiper.params.mousewheel.enabled) swiper.mousewheel.enable();
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
if (swiper.mousewheel.enabled) swiper.mousewheel.disable();
|
||||
},
|
||||
},
|
||||
};
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
import $ from '../../utils/dom';
|
||||
import Utils from '../../utils/utils';
|
||||
|
||||
const Navigation = {
|
||||
update() {
|
||||
// Update Navigation Buttons
|
||||
const swiper = this;
|
||||
const params = swiper.params.navigation;
|
||||
|
||||
if (swiper.params.loop) return;
|
||||
const { $nextEl, $prevEl } = swiper.navigation;
|
||||
|
||||
if ($prevEl && $prevEl.length > 0) {
|
||||
if (swiper.isBeginning) {
|
||||
$prevEl.addClass(params.disabledClass);
|
||||
} else {
|
||||
$prevEl.removeClass(params.disabledClass);
|
||||
}
|
||||
$prevEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
|
||||
}
|
||||
if ($nextEl && $nextEl.length > 0) {
|
||||
if (swiper.isEnd) {
|
||||
$nextEl.addClass(params.disabledClass);
|
||||
} else {
|
||||
$nextEl.removeClass(params.disabledClass);
|
||||
}
|
||||
$nextEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](params.lockClass);
|
||||
}
|
||||
},
|
||||
onPrevClick(e) {
|
||||
const swiper = this;
|
||||
e.preventDefault();
|
||||
if (swiper.isBeginning && !swiper.params.loop) return;
|
||||
swiper.slidePrev();
|
||||
},
|
||||
onNextClick(e) {
|
||||
const swiper = this;
|
||||
e.preventDefault();
|
||||
if (swiper.isEnd && !swiper.params.loop) return;
|
||||
swiper.slideNext();
|
||||
},
|
||||
init() {
|
||||
const swiper = this;
|
||||
const params = swiper.params.navigation;
|
||||
if (!(params.nextEl || params.prevEl)) return;
|
||||
|
||||
let $nextEl;
|
||||
let $prevEl;
|
||||
if (params.nextEl) {
|
||||
$nextEl = $(params.nextEl);
|
||||
if (
|
||||
swiper.params.uniqueNavElements
|
||||
&& typeof params.nextEl === 'string'
|
||||
&& $nextEl.length > 1
|
||||
&& swiper.$el.find(params.nextEl).length === 1
|
||||
) {
|
||||
$nextEl = swiper.$el.find(params.nextEl);
|
||||
}
|
||||
}
|
||||
if (params.prevEl) {
|
||||
$prevEl = $(params.prevEl);
|
||||
if (
|
||||
swiper.params.uniqueNavElements
|
||||
&& typeof params.prevEl === 'string'
|
||||
&& $prevEl.length > 1
|
||||
&& swiper.$el.find(params.prevEl).length === 1
|
||||
) {
|
||||
$prevEl = swiper.$el.find(params.prevEl);
|
||||
}
|
||||
}
|
||||
|
||||
if ($nextEl && $nextEl.length > 0) {
|
||||
$nextEl.on('click', swiper.navigation.onNextClick);
|
||||
}
|
||||
if ($prevEl && $prevEl.length > 0) {
|
||||
$prevEl.on('click', swiper.navigation.onPrevClick);
|
||||
}
|
||||
|
||||
Utils.extend(swiper.navigation, {
|
||||
$nextEl,
|
||||
nextEl: $nextEl && $nextEl[0],
|
||||
$prevEl,
|
||||
prevEl: $prevEl && $prevEl[0],
|
||||
});
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
const { $nextEl, $prevEl } = swiper.navigation;
|
||||
if ($nextEl && $nextEl.length) {
|
||||
$nextEl.off('click', swiper.navigation.onNextClick);
|
||||
$nextEl.removeClass(swiper.params.navigation.disabledClass);
|
||||
}
|
||||
if ($prevEl && $prevEl.length) {
|
||||
$prevEl.off('click', swiper.navigation.onPrevClick);
|
||||
$prevEl.removeClass(swiper.params.navigation.disabledClass);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'navigation',
|
||||
params: {
|
||||
navigation: {
|
||||
nextEl: null,
|
||||
prevEl: null,
|
||||
|
||||
hideOnClick: false,
|
||||
disabledClass: 'swiper-button-disabled',
|
||||
hiddenClass: 'swiper-button-hidden',
|
||||
lockClass: 'swiper-button-lock',
|
||||
},
|
||||
},
|
||||
create() {
|
||||
const swiper = this;
|
||||
Utils.extend(swiper, {
|
||||
navigation: {
|
||||
init: Navigation.init.bind(swiper),
|
||||
update: Navigation.update.bind(swiper),
|
||||
destroy: Navigation.destroy.bind(swiper),
|
||||
onNextClick: Navigation.onNextClick.bind(swiper),
|
||||
onPrevClick: Navigation.onPrevClick.bind(swiper),
|
||||
},
|
||||
});
|
||||
},
|
||||
on: {
|
||||
init() {
|
||||
const swiper = this;
|
||||
swiper.navigation.init();
|
||||
swiper.navigation.update();
|
||||
},
|
||||
toEdge() {
|
||||
const swiper = this;
|
||||
swiper.navigation.update();
|
||||
},
|
||||
fromEdge() {
|
||||
const swiper = this;
|
||||
swiper.navigation.update();
|
||||
},
|
||||
destroy() {
|
||||
const swiper = this;
|
||||
swiper.navigation.destroy();
|
||||
},
|
||||
click(e) {
|
||||
const swiper = this;
|
||||
const { $nextEl, $prevEl } = swiper.navigation;
|
||||
if (
|
||||
swiper.params.navigation.hideOnClick
|
||||
&& !$(e.target).is($prevEl)
|
||||
&& !$(e.target).is($nextEl)
|
||||
) {
|
||||
let isHidden;
|
||||
if ($nextEl) {
|
||||
isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
|
||||
} else if ($prevEl) {
|
||||
isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
|
||||
}
|
||||
if (isHidden === true) {
|
||||
swiper.emit('navigationShow', swiper);
|
||||
} else {
|
||||
swiper.emit('navigationHide', swiper);
|
||||
}
|
||||
if ($nextEl) {
|
||||
$nextEl.toggleClass(swiper.params.navigation.hiddenClass);
|
||||
}
|
||||
if ($prevEl) {
|
||||
$prevEl.toggleClass(swiper.params.navigation.hiddenClass);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 27px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
background-size: 27px 44px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
&.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
|
||||
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{themeColor}'/></svg>");
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
|
||||
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{themeColor}'/></svg>");
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
.navigation-color-loop({
|
||||
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
|
||||
&.swiper-button-@{navColorName} {
|
||||
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='@{navColorValue}'/></svg>");
|
||||
}
|
||||
}
|
||||
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
|
||||
&.swiper-button-@{navColorName} {
|
||||
.svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='@{navColorValue}'/></svg>");
|
||||
}
|
||||
}
|
||||
});
|
||||
.swiper-button-lock {
|
||||
display: none;
|
||||
}
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
.swiper-button-prev, .swiper-button-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 27px;
|
||||
height: 44px;
|
||||
margin-top: -22px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
background-size: 27px 44px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
&.swiper-button-disabled {
|
||||
opacity: 0.35;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
|
||||
background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#{$themeColor}'/></svg>");
|
||||
left: 10px;
|
||||
right: auto;
|
||||
}
|
||||
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
|
||||
background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#{$themeColor}'/></svg>");
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@each $navColorName, $navColorValue in $colors {
|
||||
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
|
||||
&.swiper-button-#{$navColorName} {
|
||||
background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#{$navColorValue}'/></svg>");
|
||||
}
|
||||
}
|
||||
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
|
||||
&.swiper-button-#{$navColorName} {
|
||||
background-image: swiper-svg-uri("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#{$navColorValue}'/></svg>");
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-button-lock {
|
||||
display: none;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user