118 lines
5.1 KiB
JavaScript
118 lines
5.1 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _dom = _interopRequireDefault(require("../../utils/dom"));
|
|
|
|
var _utils = require("../../utils/utils");
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
|
|
var Coverflow = {
|
|
setTranslate: function setTranslate() {
|
|
var swiper = this;
|
|
var swiperWidth = swiper.width,
|
|
swiperHeight = swiper.height,
|
|
slides = swiper.slides,
|
|
slidesSizesGrid = swiper.slidesSizesGrid;
|
|
var params = swiper.params.coverflowEffect;
|
|
var isHorizontal = swiper.isHorizontal();
|
|
var transform = swiper.translate;
|
|
var center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
|
|
var rotate = isHorizontal ? params.rotate : -params.rotate;
|
|
var translate = params.depth; // Each slide offset from center
|
|
|
|
for (var i = 0, length = slides.length; i < length; i += 1) {
|
|
var $slideEl = slides.eq(i);
|
|
var slideSize = slidesSizesGrid[i];
|
|
var slideOffset = $slideEl[0].swiperSlideOffset;
|
|
var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * params.modifier;
|
|
var rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
|
|
var rotateX = isHorizontal ? 0 : rotate * offsetMultiplier; // var rotateZ = 0
|
|
|
|
var translateZ = -translate * Math.abs(offsetMultiplier);
|
|
var stretch = params.stretch; // Allow percentage to make a relative stretch for responsive sliders
|
|
|
|
if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
|
|
stretch = parseFloat(params.stretch) / 100 * slideSize;
|
|
}
|
|
|
|
var translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
|
|
var translateX = isHorizontal ? stretch * offsetMultiplier : 0;
|
|
var scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier); // Fix for ultra small values
|
|
|
|
if (Math.abs(translateX) < 0.001) translateX = 0;
|
|
if (Math.abs(translateY) < 0.001) translateY = 0;
|
|
if (Math.abs(translateZ) < 0.001) translateZ = 0;
|
|
if (Math.abs(rotateY) < 0.001) rotateY = 0;
|
|
if (Math.abs(rotateX) < 0.001) rotateX = 0;
|
|
if (Math.abs(scale) < 0.001) scale = 0;
|
|
var slideTransform = "translate3d(" + translateX + "px," + translateY + "px," + translateZ + "px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg) scale(" + scale + ")";
|
|
$slideEl.transform(slideTransform);
|
|
$slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
|
|
|
|
if (params.slideShadows) {
|
|
// Set shadows
|
|
var $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
|
|
var $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
|
|
|
|
if ($shadowBeforeEl.length === 0) {
|
|
$shadowBeforeEl = (0, _dom.default)("<div class=\"swiper-slide-shadow-" + (isHorizontal ? 'left' : 'top') + "\"></div>");
|
|
$slideEl.append($shadowBeforeEl);
|
|
}
|
|
|
|
if ($shadowAfterEl.length === 0) {
|
|
$shadowAfterEl = (0, _dom.default)("<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;
|
|
}
|
|
}
|
|
},
|
|
setTransition: function setTransition(duration) {
|
|
var 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);
|
|
}
|
|
};
|
|
var _default = {
|
|
name: 'effect-coverflow',
|
|
params: {
|
|
coverflowEffect: {
|
|
rotate: 50,
|
|
stretch: 0,
|
|
depth: 100,
|
|
scale: 1,
|
|
modifier: 1,
|
|
slideShadows: true
|
|
}
|
|
},
|
|
create: function create() {
|
|
var swiper = this;
|
|
(0, _utils.bindModuleMethods)(swiper, {
|
|
coverflowEffect: _extends({}, Coverflow)
|
|
});
|
|
},
|
|
on: {
|
|
beforeInit: function beforeInit(swiper) {
|
|
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: function setTranslate(swiper) {
|
|
if (swiper.params.effect !== 'coverflow') return;
|
|
swiper.coverflowEffect.setTranslate();
|
|
},
|
|
setTransition: function setTransition(swiper, duration) {
|
|
if (swiper.params.effect !== 'coverflow') return;
|
|
swiper.coverflowEffect.setTransition(duration);
|
|
}
|
|
}
|
|
};
|
|
exports.default = _default; |