In the div with a class of scroll-content, I have a long list of images that I want to hide under a scroller div. My goal is to create a slide effect using arrow buttons. However, the flex box expands beyond 100% of the container. This issue arises within a Next JS application.
let products = [{
name: "sample 1",
imageUrl: "https://picsum.photos/536/354"
}];
const Home = async () => {
return (
<main className="flex min-h-screen flex-col items-center w-full">
<div className="px-2">
{" "}
<div className="w-full mt-3">
<span className="text-lg font-bold">Top picks</span>
</div>
<div id="scroller" className="w-full overflow-hidden z-10">
<div id="scroll-content" className="flex z-0">
<div className="inline-block h-[10rem] w-[10rem] flex-shrink-0">
<img
className="h-full max-w-full rounded-lg object-cover shadow-lg"
alt={products[0].name}
src={`${products[0].imageUrl}`}
/>
</div>
{/* Repeat the above div for other images */}
<div className="inline-block h-[10rem] w-[10rem] flex-shrink-0">
<img
className="h-full max-w-full rounded-lg object-cover shadow-lg"
alt={products[0].name}
src={`${products[0].imageUrl}`}
/>
</div>
{/* Add more divs as needed */}
{/* The remaining image divs are omitted for brevity */}
</div>
</div>
<div className="w-full mt-3">
<span className="text-lg font-bold">Quick Links</span>
</div>{" "}
</div>
</main>
);
};
export default Home;
Despite trying methods like inline-block and grid, achieving the desired functionality has proven to be challenging. Grid causes internal divs to overlap each other, while inline-block wrapping is not satisfactory either.