{showThcBadge && (
@@ -460,7 +488,7 @@ class Product extends Component {
{
+ if (!this._isMounted) return;
+ const next = getProductCarouselItemStridePx();
+ if (next !== this.state.itemStride) {
+ this.translateX = 0;
+ this.updateTrackTransform();
+ this.setState({ itemStride: next });
+ }
+ };
+
componentDidMount() {
this._isMounted = true;
+ if (typeof window !== "undefined") {
+ window.addEventListener("resize", this.handleCarouselResize);
+ this.setState({ itemStride: getProductCarouselItemStridePx() });
+ }
const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n.language;
logCarousel("mount", {
@@ -370,6 +391,9 @@ class ProductCarousel extends React.Component {
componentWillUnmount() {
this._isMounted = false;
+ if (typeof window !== "undefined") {
+ window.removeEventListener("resize", this.handleCarouselResize);
+ }
this.stopAutoScroll();
this.clearInactivityTimer();
this.clearScrollbarTimer();
@@ -430,8 +454,9 @@ class ProductCarousel extends React.Component {
this.translateX -= AUTO_SCROLL_SPEED;
this.updateTrackTransform();
+ const { itemStride } = this.state;
const originalItemCount = this.originalProducts.length;
- const maxScroll = ITEM_WIDTH * originalItemCount;
+ const maxScroll = itemStride * originalItemCount;
// Check if we've scrolled past the first set of items
if (Math.abs(this.translateX) >= maxScroll) {
@@ -467,14 +492,15 @@ class ProductCarousel extends React.Component {
if (this.originalProducts.length === 0) return;
// direction: 1 = left (scroll content right), -1 = right (scroll content left)
+ const { itemStride } = this.state;
const originalItemCount = this.originalProducts.length;
- const maxScroll = ITEM_WIDTH * originalItemCount;
+ const maxScroll = itemStride * originalItemCount;
- this.translateX += direction * ITEM_WIDTH;
+ this.translateX += direction * itemStride;
// Handle wrap-around when scrolling left (positive translateX)
if (this.translateX > 0) {
- this.translateX = -(maxScroll - ITEM_WIDTH);
+ this.translateX = -(maxScroll - itemStride);
}
// Handle wrap-around when scrolling right (negative translateX beyond limit)
else if (Math.abs(this.translateX) >= maxScroll) {
@@ -494,9 +520,13 @@ class ProductCarousel extends React.Component {
return null;
}
+ const { itemStride } = this.state;
const originalItemCount = this.originalProducts.length;
- const viewportWidth = 1080; // carousel container max-width
- const itemsInView = Math.floor(viewportWidth / ITEM_WIDTH);
+ const viewportWidth =
+ typeof window !== "undefined"
+ ? Math.min(1080, Math.max(0, window.innerWidth - 56))
+ : 1080;
+ const itemsInView = Math.max(1, Math.floor(viewportWidth / itemStride));
// Calculate which item is currently at the left edge (first visible)
let currentItemIndex;
@@ -504,11 +534,11 @@ class ProductCarousel extends React.Component {
if (this.translateX === 0) {
currentItemIndex = 0;
} else if (this.translateX > 0) {
- const maxScroll = ITEM_WIDTH * originalItemCount;
+ const maxScroll = itemStride * originalItemCount;
const effectivePosition = maxScroll + this.translateX;
- currentItemIndex = Math.floor(effectivePosition / ITEM_WIDTH);
+ currentItemIndex = Math.floor(effectivePosition / itemStride);
} else {
- currentItemIndex = Math.floor(Math.abs(this.translateX) / ITEM_WIDTH);
+ currentItemIndex = Math.floor(Math.abs(this.translateX) / itemStride);
}
// Ensure we stay within bounds
@@ -615,7 +645,7 @@ class ProductCarousel extends React.Component {
top: '50%',
left: '8px',
transform: 'translateY(-50%)',
- zIndex: 1200,
+ zIndex: 1000,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
width: '48px',
@@ -635,7 +665,7 @@ class ProductCarousel extends React.Component {
top: '50%',
right: '8px',
transform: 'translateY(-50%)',
- zIndex: 1200,
+ zIndex: 1000,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
width: '48px',
@@ -676,16 +706,19 @@ class ProductCarousel extends React.Component {
}}
>
{products.map((product, index) => (
-
+
))}