How can I implement a CSS-only slideshow / carousel with next and previous buttons?

Ask a question+

I need to know how I can implement a slideshow with next and previous buttons using only CSS?

Jane Cox 100
add comment

1 Answer

  • Select a static width and height for the slides.
  • Put all your slides side-by-side in a single image.
  • Place the image as the background of the <div>. Use the background-position property to define the initial position as 0px.
  • Make sure to measure where the position needs to be for each slide, they should be negative numbers.
  • Set the length of time in the animation for the whole slideshow to operate. Use the animation-duration for that purpose.
  • For the @keyframes, you must do some math. It’s (pics * 2) / 100. Use this as the multiplier for each slide, with “100%” being the last keyframe. Each image requires multiple keyframes to “pause” the slideshow on the image.
    Source: https://www.w3docs.com/snippets/css/how-to-create-an-image-slider-or-slideshow.html
    You can also try some interesting examples there.
Jane Moore 210
add comment

Your Answer