Minimalist CSS Image Carousel Tutorial

Minimalist CSS Image Carousel Tutorial


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

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author
  10. Post
    Author
    Yahoo Ji

    Sir please help me..
    How I make flipkart like touch friendly slide menu (when I swipe left to right it will appear it's like android slide menu)so sir how can I make this type of menu

  11. Post
    Author
  12. Post
    Author
  13. Post
    Author
  14. Post
    Author
  15. Post
    Author
  16. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *