How can I make an image carousel with only CSS?

html

responsive-design

css-transitions

accessibility

byAnton Shumikhin·Nov 26, 2024

Just use position: absolute; and :target to create your CSS-only image carousel. Anchor links labeled with unique ids control the carousel operation, and an active @keyframes animation automatically cycles through the images.

/*Our kitties are hiding behind one another! Meow 🐱 */
.carousel img { display: none; position: absolute; }
/* Peek-a-boo! Image appears when its anchor tag is targeted */
#img1:target, #img2:target, #img3:target { display: block; }
/* Creating a cat-walk, er... I mean... catwalk of images 🐾 */
@keyframes cycle { 0%,100% { location.hash='#img1'; } 33% { location.hash='#img2'; } 66% { location.hash='#img3'; }}
.carousel { animation: cycle 15s infinite; }

Set the anchors as control buttons for a user-friendly operation:

<div class="carousel">
  <a href="#img1" id="img1">Next</a> <img src="image1.jpg"/>
  <a href="#img2" id="img2">Next</a> <img src="image2.jpg"/>
  <a href="#img3" id="img3">Next</a> <img src="image3.jpg"/>
</div>

Custom `prev` and `next` icons

Style your previous and next buttons to mimic conventional media control symbols, leveraging CSS to shape these label-based buttons. Place them logically around your carousel images, prioritizing positioning over other aesthetic aspirations.

/*Arrows aren't only meant for Cupid! Style your navigation controls now 🏹 */
.carousel a {
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel a#img1 { left: 0; }
.carousel a#img2, .carousel a#img3 { right: 0; }

A more dynamic carousel

For multiple images, dynamically set your carousel with a templating engine like Jade or Handlebars. A for-loop does the heavy lifting, creating HTML code based on your image array.

each imgSrc, index in images
  input(type="radio" id=`img${index}` name="carousel" checked=index===0)
  label(for=`img${index}`) Next
  .carousel__slide(style=`background-image: url(${imgSrc});`)

Catering to device screens

Ensure consistency across devices by making your carousel flexible for various screen sizes. Adjust the positioning and sizing of controls for a touch-friendly operation on smaller screens, and use percentage widths or viewport units for fluid layouts.

/*Shrink until you fit! Go on a pixel diet 🍪*/
@media (max-width: 768px) {
  .carousel a {
    padding: 10px;
    font-size: larger; /* Large, juicy controls made for touch screens */
  }
}

More on transitions

Leverage CSS transitions to create fluid motion between slides for that look of polished elegance. Refine the animation by adjusting transition-duration and transition-timing-function.

/* Magic carpet rides are smoother! Trust me, I am Aladdin's buddy! 🌠 */
.carousel img {
  transition: opacity 1s ease-in-out;
}

Ensuring accessibility

Make your carousel accessible by implementing keyboard navigability. Additionally, highlight clear visual indicators that show progression through the carousel slides.

/*Pointers for the vision impaired, hope you don't mind playing fetch 🦮 */
.carousel input[type="radio"]:focus + label {
  outline: 2px solid blue; /* For keyboard focus */
}

Automatic slide shifting

To create an autoplaying carousel, use CSS keyframe animations. Develop your @keyframes to revisit the :target at regular intervals, simulating a seamless carousel walk.

/* We've got autopilots for images too! Take a rest, human 🤖 */
@keyframes autoplay-carousel {
  0% { location.hash='#img1'; }
  25% { location.hash='#img2'; }
  50% { location.hash='#img3'; }
  /* Repeat as necessary */
}
.carousel {
  animation: autoplay-carousel 20s infinite;
}