From f8f03b9a2accd323de90b04a224336c580d8bc5c Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Thu, 4 Sep 2025 21:02:36 +0800 Subject: [PATCH 1/3] fix translateX value --- src/block/carousel/frontend-carousel.js | 34 ++++++++++++++++++++----- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/block/carousel/frontend-carousel.js b/src/block/carousel/frontend-carousel.js index 969cf5c1ef..7e9cf22194 100644 --- a/src/block/carousel/frontend-carousel.js +++ b/src/block/carousel/frontend-carousel.js @@ -93,11 +93,15 @@ class _StackableCarousel { const clone = original.cloneNode( true ) clone.classList.add( `stk-slide-clone-${ slideIndex + 1 }` ) clone.style.zIndex = -1 + + clone.style.willChange = 'transform' + clone.style.transform = 'TranslateX( 0 )' original.style.willChange = 'transform' original.style.transform = 'TranslateX( 0 )' // prevents flickering when changing the value of TranslateX original.style.transition = 'transform 0s' + clone.style.transition = 'transform 0s' this.clones.push( clone ) @@ -118,10 +122,25 @@ class _StackableCarousel { step++ } else if ( step === 2 ) { const numSlides = this.slideEls.length - const slideClientRect = this.slideEls[ 0 ].getBoundingClientRect() - const slideWidth = slideClientRect.width - this.slideTranslateX = `calc((${ slideWidth }px * ${ numSlides }) + (var(--gap) * ${ numSlides }))` + // Calculate and assign the translateX values for each slide and its corresponding clone. + // This ensures that when slides are swapped for infinite scrolling, they appear in the correct position. + // The translateX value is based on the width of the slides and the number of slides, including margins and gaps. + this.slideEls.forEach( ( slide, index ) => { + const computedStyles = window.getComputedStyle( slide ) + const margins = parseInt( computedStyles.getPropertyValue( 'margin-left' ) ) + parseInt( computedStyles.getPropertyValue( 'margin-right' ) ) + const width = slide.getBoundingClientRect().width + margins + + slide.slideTranslateX = `calc((${ width }px * ${ numSlides }) + (var(--gap) * ${ numSlides }))` + + if ( index < this.slidesToShow ) { + this.clones[ index ].slideTranslateX = slide.slideTranslateX + } + + if ( index === this.slideEls.length - 1 ) { + this.clones[ this.clones.length - 1 ].slideTranslateX = `calc((${ width }px * -${ numSlides }) + (var(--gap) * -${ numSlides }))` + } + } ) step++ } else if ( step === 3 ) { @@ -297,12 +316,12 @@ class _StackableCarousel { const needToSwap = this.needToSwapCount( slide ) let startIndex = 0 let endIndex = 0 - let slideTranslateXValue = 0 + let useSlideTranslateX = false if ( needToSwap > 0 && this.swappedSlides < needToSwap ) { startIndex = this.swappedSlides endIndex = needToSwap - slideTranslateXValue = this.slideTranslateX + useSlideTranslateX = true this.swappedSlides = endIndex } else if ( this.swappedSlides > needToSwap ) { @@ -317,7 +336,10 @@ class _StackableCarousel { const runSteps = () => { if ( step === 0 ) { this.slideEls.slice( startIndex, endIndex ).forEach( slide => { - slide.style.transform = `TranslateX(${ slideTranslateXValue })` + slide.style.transform = `TranslateX(${ useSlideTranslateX ? slide.slideTranslateX : 0 })` + } ) + this.clones.slice( startIndex, endIndex ).forEach( clone => { + clone.style.transform = `TranslateX(${ useSlideTranslateX ? clone.slideTranslateX : 0 })` } ) step++ requestAnimationFrame( runSteps ) From f87aedc5147ea875044f9f485a50d8a4e6040964 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Mon, 8 Sep 2025 10:03:59 +0800 Subject: [PATCH 2/3] simplify calculation of translateX --- src/block/carousel/frontend-carousel.js | 30 ++++++++----------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/src/block/carousel/frontend-carousel.js b/src/block/carousel/frontend-carousel.js index 7e9cf22194..9b4c4f31fe 100644 --- a/src/block/carousel/frontend-carousel.js +++ b/src/block/carousel/frontend-carousel.js @@ -121,26 +121,14 @@ class _StackableCarousel { } step++ } else if ( step === 2 ) { - const numSlides = this.slideEls.length + // Calculate the difference between the first slide and the first clone + // This is used to calculate the translateX values for the slides and clones + const slideOffsetLeft = this.slideEls[ 0 ].offsetLeft + const cloneOffsetLeft = this.clones[ 0 ].offsetLeft - // Calculate and assign the translateX values for each slide and its corresponding clone. - // This ensures that when slides are swapped for infinite scrolling, they appear in the correct position. - // The translateX value is based on the width of the slides and the number of slides, including margins and gaps. - this.slideEls.forEach( ( slide, index ) => { - const computedStyles = window.getComputedStyle( slide ) - const margins = parseInt( computedStyles.getPropertyValue( 'margin-left' ) ) + parseInt( computedStyles.getPropertyValue( 'margin-right' ) ) - const width = slide.getBoundingClientRect().width + margins - - slide.slideTranslateX = `calc((${ width }px * ${ numSlides }) + (var(--gap) * ${ numSlides }))` - - if ( index < this.slidesToShow ) { - this.clones[ index ].slideTranslateX = slide.slideTranslateX - } - - if ( index === this.slideEls.length - 1 ) { - this.clones[ this.clones.length - 1 ].slideTranslateX = `calc((${ width }px * -${ numSlides }) + (var(--gap) * -${ numSlides }))` - } - } ) + const diff = Math.abs( slideOffsetLeft - cloneOffsetLeft ) + this.slideTranslateX = ( this.isRTL ? -diff : diff ) + 'px' + this.cloneTranslateX = ( this.isRTL ? diff : -diff ) + 'px' step++ } else if ( step === 3 ) { @@ -336,10 +324,10 @@ class _StackableCarousel { const runSteps = () => { if ( step === 0 ) { this.slideEls.slice( startIndex, endIndex ).forEach( slide => { - slide.style.transform = `TranslateX(${ useSlideTranslateX ? slide.slideTranslateX : 0 })` + slide.style.transform = `translateX(${ useSlideTranslateX ? this.slideTranslateX : 0 })` } ) this.clones.slice( startIndex, endIndex ).forEach( clone => { - clone.style.transform = `TranslateX(${ useSlideTranslateX ? clone.slideTranslateX : 0 })` + clone.style.transform = `translateX(${ useSlideTranslateX ? this.cloneTranslateX : 0 })` } ) step++ requestAnimationFrame( runSteps ) From 2c6314269fd45d20b8dd136ee6ef5d9699c37182 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Wed, 10 Sep 2025 11:31:52 +0800 Subject: [PATCH 3/3] Update src/block/carousel/frontend-carousel.js --- src/block/carousel/frontend-carousel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/block/carousel/frontend-carousel.js b/src/block/carousel/frontend-carousel.js index 9b4c4f31fe..25e6af8799 100644 --- a/src/block/carousel/frontend-carousel.js +++ b/src/block/carousel/frontend-carousel.js @@ -95,7 +95,7 @@ class _StackableCarousel { clone.style.zIndex = -1 clone.style.willChange = 'transform' - clone.style.transform = 'TranslateX( 0 )' + clone.style.transform = 'translateX( 0 )' original.style.willChange = 'transform' original.style.transform = 'TranslateX( 0 )'