Carousel Demo

Day 3 of 100 Days Of Code

Continued to complete the components section of jonas schmedtmann's course on Udemy and built a Carousel.

For anyone confused with the translate() function :

• top:50% will move an element 50% of the parent containers height. We can use transform : translate(50%,-50%) to move a button 50% of its height upwards and 50% of its height leftwards (positive for up and negative for down). It will move 50% of the actual elements height and not the parent containers height.
• If used in px , it will not move relative to anything , it will relative to itself
• The translate() function can be used to move an element(picture or button)
  • The first parameter is the units on the x-axis
  • The second parameter is the units on the y-axis

For more such content , follow me on twitter and dev.to