123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- import effectInit from '../../shared/effect-init.js';
- import effectTarget from '../../shared/effect-target.js';
- import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
- export default function EffectFade({
- swiper,
- extendParams,
- on
- }) {
- extendParams({
- fadeEffect: {
- crossFade: false,
- transformEl: null
- }
- });
- const setTranslate = () => {
- const {
- slides
- } = swiper;
- const params = swiper.params.fadeEffect;
- for (let i = 0; i < slides.length; i += 1) {
- const $slideEl = swiper.slides[i];
- const offset = $slideEl.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.progress), 0) :
- 1 + Math.min(Math.max($slideEl.progress, -1), 0);
- const $targetEl = effectTarget(params, $slideEl);
- $targetEl.css({
- opacity: slideOpacity
- })
- $targetEl.transform(`translate3d(${tx}px, ${ty}px, 0px)`);
- if (swiper.params.willChange) {
- $targetEl.willChange("opacity");
- }
- slides[i].addClass('swiper-slide-fade')
- }
- };
- const setTransition = duration => {
- const {
- transformEl
- } = swiper.params.fadeEffect;
- const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
- for (let i = 0; i < $transitionElements.length; i += 1) {
- $transitionElements[i].transition(duration);
- }
- effectVirtualTransitionEnd({
- swiper,
- duration,
- transformEl,
- allSlides: true
- });
- };
- effectInit({
- effect: 'fade',
- swiper,
- on,
- setTranslate,
- setTransition,
- overwriteParams: () => ({
- slidesPerView: 1,
- slidesPerGroup: 1,
- watchSlidesProgress: true,
- spaceBetween: 0,
- virtualTranslate: !swiper.params.cssMode
- })
- });
- }
|