-
Notifications
You must be signed in to change notification settings - Fork 294
Description
Description:
I'm experiencing an issue with the react-multi-carousel component when using Next.js 14 with React 18. Here is the component setup:
`"use client";
import React from "react";
import Carousel, { ResponsiveType } from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import Image from "next/image";
export interface ImagesSliderProps {
eventImages?: string[];
testId?: string;
}
const responsive: ResponsiveType = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
slidesToSlide: 1,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
slidesToSlide: 1,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
slidesToSlide: 1,
},
};
export function ImagesSlider({ testId, eventImages }: ImagesSliderProps) {
return (
<div className={styles.container} data-testid={testId ?? "event-images-slider"}>
{eventImages?.map((slide, index) => (
<React.Fragment key={index}>
</React.Fragment>
))}
);
}
const styles = {
wrapper: "w-full h-auto",
image: "w-full h-240 object-cover rounded-12",
container: "mb-10 relative",
dotItem: "first:ps-0 last:pe-0 px-2",
};
`
Issue Details:
Using react-multi-carousel with this configuration in a Next.js 14 application (React 18) produces unexpected behavior.
The carousel either does not render any runtime errors.
Expected Behavior: The carousel should display correctly across different screen sizes as defined in the responsive configuration.
it goes outside the content area width and keeps on scrolling
Additional Information:
Next.js version: 14
React version: 18
react-multi-carousel version: [version you’re using]
Possible Workaround/Debug Attempts: If there are any temporary workarounds, or if specific settings or configurations resolve this issue, sharing that information would be greatly appreciated.

