hello and welcome to red stapler Channel and this tutorial I'm going to show you
how to create a minimalist design image carousel with pure CSS in just a few
minutes ready let's check it out I
already prepared some images that I'm going to put into the carousel for this
tutorial you don't have to resize the image at all we'll do that with CSS and
here is the example page for this tutorial I already have a container div
with Flex layout to Center the content on the screen first I'm going to create
the carousel body then set width and height position and background color
then I'm going to add a box shadow
looks good now let's add some images I'm going to create a wrapper div to contain
images
now it's a little bit messy since we didn't resize any image I'm going to set
the image container height to 100 pixels and use flex layout to Center them
vertically next I will reduce the image height a little bit by setting it to 70
pixels and also add some side padding as well
then we'll add animation a very simple trick using just - 100% translateX
now you will see that we will have a problem when the animation loop is
ending to make it seamless for us we will need to duplicate the entire slide
and place it next to itself
then we were a display flex to the main container div to keep both of them on
the same line looks good now let's add overflow:hidden to hide excess part
almost there now we are going to create a gradient
blur effect on both end of the carousel first let's create pseudo elements the
before element will be used for left side and after for right side I will set
the width height absolute position and content to empty then I'm going to add a
linear gradient from solid white to transparent next I'm going to place them
to both end of the carousel
also flip the one on the right using rotateZ and finally increase the z-index to
keep them on top of the other divs and that's it for this tutorial hope you
guys enjoy and if you love this video don't forget to like or subscribe to
stay tune with our channel thanks for watching and see you next time bye