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.
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"}> <Carousel sliderClass="w-full" containerClass="w-full max-w-full" infinite={false} responsive={responsive} showDots={true} renderDotsOutside={true} draggable={false} arrows={true} itemClass={styles.dotItem} partialVisible={false} dotListClass="custom-dot-list"
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.
Screenshots
