From 693a7959fd33a613cb03557d30f3c1ebf36bf1f3 Mon Sep 17 00:00:00 2001
From: Junaid Bhura <junaid.bhura@travelopia.com>
Date: Mon, 19 Feb 2024 09:29:34 +1100
Subject: [PATCH 1/2] fix resize problem

---
 src/slider/tp-slider.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts
index fb96422..0323f28 100644
--- a/src/slider/tp-slider.ts
+++ b/src/slider/tp-slider.ts
@@ -357,11 +357,7 @@ export class TPSliderElement extends HTMLElement {
 		this.slide();
 
 		// Done, let's remove the flag.
-		// We need to do this on a timeout to avoid a race condition with transitions.
-		const _this = this;
-		setTimeout( function() {
-			_this.removeAttribute( 'resizing' );
-		}, 20 );
+		this.removeAttribute( 'resizing' );
 	}
 
 	/**

From 677d7d6355c6aa8dbe6d976177bf382643adf156 Mon Sep 17 00:00:00 2001
From: Junaid Bhura <junaid.bhura@travelopia.com>
Date: Mon, 19 Feb 2024 09:54:43 +1100
Subject: [PATCH 2/2] fix slider with non-flexible height and fade

---
 src/slider/index.html   | 31 ++++++++++++++++++++++++++++++-
 src/slider/tp-slider.ts | 23 ++++++++++++++++++-----
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/slider/index.html b/src/slider/index.html
index 500b588..b115bc4 100644
--- a/src/slider/index.html
+++ b/src/slider/index.html
@@ -61,7 +61,7 @@
 
 		<br>
 
-		<!--Slider with 'fade in' effect-->
+		<!--Slider with 'fade in' effect and flexible height-->
 		<tp-slider flexible-height="yes" infinite="yes" swipe="yes" behaviour="fade">
 			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
 			<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
@@ -90,6 +90,35 @@
 
 		<br>
 
+		<!--Slider with 'fade in' effect and not flexible height-->
+		<tp-slider behaviour="fade" infinite="yes" swipe="yes">
+			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
+			<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
+			<tp-slider-track>
+				<tp-slider-slides>
+					<tp-slider-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide><img src="https://picsum.photos/600/300" width="600" height="300" alt=""></tp-slider-slide>
+					<tp-slider-slide>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</tp-slider-slide>
+				</tp-slider-slides>
+			</tp-slider-track>
+			<tp-slider-nav>
+				<tp-slider-nav-item><button>1</button></tp-slider-nav-item>
+				<tp-slider-nav-item><button>2</button></tp-slider-nav-item>
+				<tp-slider-nav-item><button>3</button></tp-slider-nav-item>
+				<tp-slider-nav-item><button>4</button></tp-slider-nav-item>
+			</tp-slider-nav>
+			<tp-slider-count current="1" total="4" format="$current / $total">1 / 4</tp-slider-count>
+		</tp-slider>
+
+		<br>
+
 		<!--Sliders with multiple visible slides-->
 		<tp-slider>
 			<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts
index 0323f28..febe7be 100644
--- a/src/slider/tp-slider.ts
+++ b/src/slider/tp-slider.ts
@@ -321,8 +321,8 @@ export class TPSliderElement extends HTMLElement {
 			return;
 		}
 
-		// Bail early if we don't want it to be flexible height.
-		if ( 'yes' !== this.getAttribute( 'flexible-height' ) ) {
+		// Bail early if we don't want it to be flexible height - as long as it doesn't fade.
+		if ( 'yes' !== this.getAttribute( 'flexible-height' ) && 'fade' !== this.getAttribute( 'behaviour' ) ) {
 			// Remove height property for good measure!
 			slidesContainer.style.removeProperty( 'height' );
 			return;
@@ -334,9 +334,22 @@ export class TPSliderElement extends HTMLElement {
 			return;
 		}
 
-		// Set the height of the container to be the height of the current slide.
-		const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;
-		slidesContainer.style.height = `${ height }px`;
+		// Check if we have a flexible height.
+		if ( 'yes' === this.getAttribute( 'flexible-height' ) ) {
+			// Set the height of the container to be the height of the current slide.
+			const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight;
+			slidesContainer.style.height = `${ height }px`;
+		} else {
+			// Set the height of the container to be the height of the tallest slide.
+			let height: number = 0;
+			slides.forEach( ( slide: TPSliderSlideElement ): void => {
+				if ( slide.scrollHeight > height ) {
+					height = slide.scrollHeight;
+				}
+			} );
+
+			slidesContainer.style.height = `${ height }px`;
+		}
 	}
 
 	/**