I want to create a carousel of identically sized images using Tailwind CSS. I want to have 5 images next to each other that the viewer will be able to scroll left and right to see the images. When the images were imported without Flex, they fit the max-width that i've set beforehand. however, after implementing Flex, the images did become side by side, but their width shrink.
In my trial i'm just using the same image 5 times. I have set the max-width of the container to be 1200px. When importing the image, i've set the image to w-full, and each images successfully fit the 1200px requirement. However, when i put Flex, the images are placed next to each other but with reduced size.
As you can see on the first image, **before **Flex, the right side of the image is directly below the O in "Our Program".before flex
but afterFlex, the first image's width only reaches the A in "About Us".after flex
How do I stop this from happening? I don't want the image to shrink. I have also written shrink-0
This is how i've written the program:
<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>