diff --git a/src/core/update/updateSlidesProgress.js b/src/core/update/updateSlidesProgress.js index 4526b47d0..622080660 100644 --- a/src/core/update/updateSlidesProgress.js +++ b/src/core/update/updateSlidesProgress.js @@ -4,7 +4,7 @@ export default function updateSlidesProgress(translate = (this && this.translate const swiper = this; const params = swiper.params; - const { slides, rtlTranslate: rtl } = swiper; + const { slides, rtlTranslate: rtl, snapGrid } = swiper; if (slides.length === 0) return; if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset(); @@ -28,6 +28,12 @@ export default function updateSlidesProgress(translate = (this && this.translate const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween); + const originalSlideProgress = + (offsetCenter - + snapGrid[0] + + (params.centeredSlides ? swiper.minTranslate() : 0) - + slideOffset) / + (slide.swiperSlideSize + params.spaceBetween); const slideBefore = -(offsetCenter - slideOffset); const slideAfter = slideBefore + swiper.slidesSizesGrid[i]; const isVisible = @@ -40,6 +46,7 @@ export default function updateSlidesProgress(translate = (this && this.translate slides.eq(i).addClass(params.slideVisibleClass); } slide.progress = rtl ? -slideProgress : slideProgress; + slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress; } swiper.visibleSlides = $(swiper.visibleSlides); } diff --git a/src/modules/effect-creative/effect-creative.js b/src/modules/effect-creative/effect-creative.js index 22efccfed..95190183d 100644 --- a/src/modules/effect-creative/effect-creative.js +++ b/src/modules/effect-creative/effect-creative.js @@ -42,6 +42,11 @@ export default function EffectCreative({ swiper, extendParams, on }) { Math.max($slideEl[0].progress, -params.limitProgress), params.limitProgress, ); + const originalProgress = Math.min( + Math.max($slideEl[0].originalProgress, -params.limitProgress), + params.limitProgress, + ); + const offset = $slideEl[0].swiperSlideOffset; const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0]; const r = [0, 0, 0]; @@ -79,13 +84,13 @@ export default function EffectCreative({ swiper, extendParams, on }) { const translateString = t.join(', '); const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`; const scaleString = - progress < 0 - ? `scale(${1 + (1 - data.scale) * progress * multiplier})` - : `scale(${1 - (1 - data.scale) * progress * multiplier})`; + originalProgress < 0 + ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` + : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`; const opacityString = - progress < 0 - ? 1 + (1 - data.opacity) * progress * multiplier - : 1 - (1 - data.opacity) * progress * multiplier; + originalProgress < 0 + ? 1 + (1 - data.opacity) * originalProgress * multiplier + : 1 - (1 - data.opacity) * originalProgress * multiplier; const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`; // Set shadows