Sitecore NextJs Carousel - next.js

Question

I want to build a Carousel in Sitecore NextJs. I found a carousel package to do so, but it hardcodes the number of slides. Since the author will create the slides dynamically in Sitecore, my NextJs component should be smart enough to detect the number of "child slides" added to the Carousel and render them accordingly.
This is the example I found online:
import React, { Component } from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
export default class NextJsCarousel extends Component {
render() {
return (
<div>
<h2>NextJs Carousel - GeeksforGeeks</h2>
<Carousel>
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
<div>
<img src="/2.png" alt="image2" />
<p className="legend">Image 2</p>
</div>
<div>
<img src="/3.png" alt="image3"/>
<p className="legend">Image 3</p>
</div>
<div>
<img src="/4.png" alt="image4"/>
<p className="legend">Image 4</p>
</div>
<div>
<img src="/5.png" alt="image5"/>
<p className="legend">Image 5</p>
</div>
</Carousel>
</div>
);
}
};
Instead, I want the Slides within the Carousel to be dynamic and use a loop based on how many slides are added under my Carousel component in Sitecore.

Answer 1

I am using react-slick for my carousels you may follow something similar approach as i did for your react-responsive-carousel.
My Slider Component:
export const MainSlider: FC<SliderProps> = ({
settings,
data,
type,
className,
}) => {
if (!(data.length > 0)) return null;
return (
<Fragment>
<div className="mian-slider">
<div className="container cus-container">
<div className="main-sec-slider">
<div className="img-box-back" />
<SlickSlider {...settings} className={className}>
{data.map((value, index) => {
return (
<div key={index}>
{type === "main-carousel"
? InnerSlider.Main(value)
: InnerSlider.Article(value)}
</div>
);
})}
</SlickSlider>
</div>
</div>
</div>
</Fragment>
);
};
Inside map function you can pass another component as i did with name InnerSlider which contains html code for your carousel images.
In your case you need to pass this:
<div>
<img src="/1.png" alt="image1"/>
<p className="legend">Image 1</p>
</div>
at last pass props data for MainSlider component :
<MainSlider
settings={settings}
data={[YOUR_SLIDER_DATA_ARRAY]}
type="main-carousel"
className="slider-main-text"
/>