111 lines
3.9 KiB
JavaScript
111 lines
3.9 KiB
JavaScript
import effectInit from '../../shared/effect-init.js';
|
|
import effectTarget from '../../shared/effect-target.js';
|
|
export default function EffectCoverflow({
|
|
swiper,
|
|
extendParams,
|
|
on
|
|
}) {
|
|
extendParams({
|
|
coverflowEffect: {
|
|
rotate: 50,
|
|
stretch: 0,
|
|
depth: 100,
|
|
scale: 1,
|
|
modifier: 1,
|
|
slideShadows: true,
|
|
transformEl: null
|
|
}
|
|
});
|
|
|
|
const setTranslate = () => {
|
|
const {
|
|
width: swiperWidth,
|
|
height: swiperHeight,
|
|
slides,
|
|
slidesSizesGrid
|
|
} = swiper;
|
|
const params = swiper.params.coverflowEffect;
|
|
const isHorizontal = swiper.isHorizontal();
|
|
const transform = swiper.translate;
|
|
const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
|
|
const rotate = isHorizontal ? params.rotate : -params.rotate;
|
|
const translate = params.depth; // Each slide offset from center
|
|
|
|
for (let i = 0, length = slides.length; i < length; i += 1) {
|
|
const $slideEl = slides[i];
|
|
const slideSize = slidesSizesGrid[i];
|
|
const slideOffset = $slideEl.swiperSlideOffset;
|
|
const 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 stretch = params.stretch; // Allow percentage to make a relative stretch for responsive sliders
|
|
|
|
if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
|
|
stretch = parseFloat(params.stretch) / 100 * slideSize;
|
|
}
|
|
|
|
let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
|
|
let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
|
|
let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier); // Fix for ultra small values
|
|
|
|
if (Math.abs(translateX) < 0.001) translateX = 0;
|
|
if (Math.abs(translateY) < 0.001) translateY = 0;
|
|
if (Math.abs(translateZ) < 0.001) translateZ = 0;
|
|
if (Math.abs(rotateY) < 0.001) rotateY = 0;
|
|
if (Math.abs(rotateX) < 0.001) rotateX = 0;
|
|
if (Math.abs(scale) < 0.001) scale = 0;
|
|
const slideTransform =
|
|
`translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
|
|
const $targetEl = effectTarget(params, $slideEl);
|
|
$targetEl.transform(slideTransform);
|
|
$slideEl.css({
|
|
zIndex: -Math.abs(Math.round(offsetMultiplier)) + 1
|
|
})
|
|
if (swiper.params.willChange) {
|
|
$targetEl.willChange("transform");
|
|
}
|
|
$slideEl.addClass('swiper-slide-coverflow')
|
|
// 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 = createShadow(params, $slideEl, isHorizontal ? 'left' : 'top');
|
|
// }
|
|
|
|
// if ($shadowAfterEl.length === 0) {
|
|
// $shadowAfterEl = createShadow(params, $slideEl, isHorizontal ? 'right' : 'bottom');
|
|
// }
|
|
|
|
// if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
|
|
// if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
|
|
// }
|
|
}
|
|
};
|
|
|
|
const setTransition = duration => {
|
|
const {
|
|
transformEl
|
|
} = swiper.params.coverflowEffect;
|
|
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
|
|
for (var i = 0; i < $transitionElements.length; i++) {
|
|
$transitionElements[i].transition(duration);
|
|
}
|
|
};
|
|
|
|
effectInit({
|
|
effect: 'coverflow',
|
|
swiper,
|
|
on,
|
|
setTranslate,
|
|
setTransition,
|
|
perspective: () => true,
|
|
overwriteParams: () => ({
|
|
watchSlidesProgress: true
|
|
})
|
|
});
|
|
}
|