I'm trying to set up a carousel of images with Tailwind CSS, where 5 identically sized images are displayed next to each other and can be scrolled left and right. When I imported the images without using Flex, they fit the max-width that I had specified beforehand. However, when I added Flex, the images ended up side by side but their width decreased.
For testing purposes, I have repeated the same image 5 times. The container's max-width is set to 1200px. Initially, setting the image width to w-full resulted in each image fitting the 1200px requirement. But upon adding Flex, the images were placed next to each other but shrunk in size.
In the first image, you can see that **before** using Flex, the right side of the image aligns directly below the letter O in "Our Program".
before flex
However, **after** applying Flex, the width of the first image only extends up to the letter A in "About Us".
after flex
How can I prevent this shrinking from occurring? I also tried using shrink-0.
This is the code snippet:
<div id="scroll header" className="slider-container">
<div className="relative my-0 mx-auto max-w-[1200px]"> {/* Class: Slider-wrapper */}
<div className="flex shrink-0 overflow-x-auto h-auto mx-auto"> {/* Class: Slider */}
<img src="/assets/banner2.jpg" className="w-full"/>
<img src="/assets/banner2.jpg" className="w-full"/>
<img src="/assets/banner2.jpg" className="w-full"/>
<img src="/assets/banner2.jpg" className="w-full"/>
<img src="/assets/banner2.jpg" className="w-full"/>
</div>