cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
121 lines (120 loc) • 5 kB
JavaScript
import "../../utils/dom.mjs";
import { bindModuleMethods } from "../../utils/utils.mjs";
import $ from "../../../../dom7/dom7.esm.mjs";
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;
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 translateZ = -translate * Math.abs(offsetMultiplier);
var stretch = params.stretch;
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);
if (Math.abs(translateX) < 1e-3)
translateX = 0;
if (Math.abs(translateY) < 1e-3)
translateY = 0;
if (Math.abs(translateZ) < 1e-3)
translateZ = 0;
if (Math.abs(rotateY) < 1e-3)
rotateY = 0;
if (Math.abs(rotateX) < 1e-3)
rotateX = 0;
if (Math.abs(scale) < 1e-3)
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) {
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 = $('<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;
}
}
},
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 EffectCoverflow = {
name: "effect-coverflow",
params: {
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
scale: 1,
modifier: 1,
slideShadows: true
}
},
create: function create() {
var swiper = this;
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 setTranslate2(swiper) {
if (swiper.params.effect !== "coverflow")
return;
swiper.coverflowEffect.setTranslate();
},
setTransition: function setTransition2(swiper, duration) {
if (swiper.params.effect !== "coverflow")
return;
swiper.coverflowEffect.setTransition(duration);
}
}
};
export { EffectCoverflow as default };