swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
314 lines (285 loc) • 12.4 kB
JavaScript
import { window } from 'ssr-window';
import Utils from '../../../utils/utils';
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 = [];
function slidesForMargin(slideIndex) {
if (!params.cssMode) return true;
if (slideIndex === slides.length - 1) {
return false;
}
return true;
}
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 === 'row' && params.slidesPerGroup > 1) {
const groupIndex = Math.floor(i / (params.slidesPerGroup * params.slidesPerColumn));
const slideIndexInGroup = i - params.slidesPerColumn * params.slidesPerGroup * groupIndex;
const columnsInGroup = groupIndex === 0
? params.slidesPerGroup
: Math.min(Math.ceil((slidesLength - groupIndex * slidesPerColumn * params.slidesPerGroup) / slidesPerColumn), params.slidesPerGroup);
row = Math.floor(slideIndexInGroup / columnsInGroup);
column = (slideIndexInGroup - row * columnsInGroup) + groupIndex * params.slidesPerGroup;
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 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 {
row = Math.floor(i / slidesPerRow);
column = i - (row * slidesPerRow);
}
slide.css(
`margin-${swiper.isHorizontal() ? 'top' : 'left'}`,
(row !== 0 && params.spaceBetween) && (`${params.spaceBetween}px`)
);
}
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') {
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') {
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 - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params.slidesPerGroup === 0) snapGrid.push(slidePosition);
slidesGrid.push(slidePosition);
slidePosition = slidePosition + slideSize + spaceBetween;
}
swiper.virtualSize += slideSize + spaceBetween;
prevSlideSize = slideSize;
index += 1;
}
swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
let newSlidesGrid;
if (
rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
$wrapperEl.css({ width: `${swiper.virtualSize + params.spaceBetween}px` });
}
if (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.filter(slidesForMargin).css({ marginLeft: `${spaceBetween}px` });
else slides.filter(slidesForMargin).css({ marginRight: `${spaceBetween}px` });
} else slides.filter(slidesForMargin).css({ marginBottom: `${spaceBetween}px` });
}
if (params.centeredSlides && params.centeredSlidesBounds) {
let allSlidesSize = 0;
slidesSizesGrid.forEach((slideSizeValue) => {
allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
});
allSlidesSize -= params.spaceBetween;
const maxSnap = allSlidesSize - swiperSize;
snapGrid = snapGrid.map((snap) => {
if (snap < 0) return -offsetBefore;
if (snap > maxSnap) return maxSnap + offsetAfter;
return snap;
});
}
if (params.centerInsufficientSlides) {
let allSlidesSize = 0;
slidesSizesGrid.forEach((slideSizeValue) => {
allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
});
allSlidesSize -= params.spaceBetween;
if (allSlidesSize < swiperSize) {
const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
snapGrid.forEach((snap, snapIndex) => {
snapGrid[snapIndex] = snap - allSlidesOffset;
});
slidesGrid.forEach((snap, snapIndex) => {
slidesGrid[snapIndex] = snap + allSlidesOffset;
});
}
}
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();
}
}