SmartCodingTips

Image Slider in CSS

An image slider (carousel) cycles through images with transitions. You can build a simple automatic or manual slider using just HTML and CSS — no JavaScript required!

1. Basic HTML Structure

Use a container with multiple images inside a wrapper:




    

        Slide 1
        Slide 2
        Slide 3

2. CSS for Auto Sliding

Use keyframes to automatically move images left to right:


.slider {
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    border-radius: 10px;
    margin: auto;
}

.slides {
    display: flex;
    width: 300%;
    animation: slide 9s infinite;
}

.slides img {
    width: 100%;
    height: auto;
}

@keyframes slide {
    0%   { transform: translateX(0); }
    33%  { transform: translateX(-100%); }
    66%  { transform: translateX(-200%); }
    100% { transform: translateX(0); }
}

3. Optional: Manual Navigation

Use radio buttons and labels to control slides without JavaScript:

Then, use the :checked pseudo-class to change slides with CSS only.

4. Tips & Best Practices

  • Use responsive units (max-width, vw) for mobile support.
  • Add object-fit: cover to control image cropping.
  • For long sliders, consider using JavaScript or libraries like Swiper.js.
  • Always provide alt attributes for accessibility.

Conclusion

CSS-only sliders are great for simple websites and portfolios. While more complex features need JavaScript, these sliders are fast and lightweight for basic needs.

← Previous: Animated Navbar Next: Product Card →