automatic image slider in hTML, cSS without javaScript

ByMarcus Richardson

Creating an automatic image slider using only HTML and CSS has several benefits:

  1. No JavaScript Needed
    • Ideal for simple projects or environments where JavaScript is restricted (e.g., emails, low-code platforms).
  2. Better Performance
    • CSS animations are optimized by browsers, leading to smoother transitions and faster rendering compared to JavaScript-based sliders.
  3. Lightweight & Simple
    • No need for external libraries or scripts, which keeps the page lightweight and faster to load.
  4. SEO-Friendly
    • Since it’s built using pure HTML, search engines can index images properly, unlike some JavaScript-based sliders.
  5. Great for Static Websites
    • Works well for portfolios, landing pages, and image showcases where you just need a simple, self-running carousel.
  6. Easy Customization
    • The CSS-only approach allows easy styling, such as adjusting timing, transitions, and layout without worrying about JavaScript logic.

Here’s a step-by-step guide on how to create an automatic image slider using only HTML and CSS, without JavaScript.

Step 1: Prepare the HTML Structure

Create an HTML file and set up the basic structure of the slider. We will use the <input> elements with type="radio" to control which image is displayed.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Only Auto Image Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="slider">
    <!-- Radio buttons for automatic sliding -->
    <input type="radio" name="slide" id="slide1" checked>
    <input type="radio" name="slide" id="slide2">
    <input type="radio" name="slide" id="slide3">

    <div class="slides">
        <div class="slide s1">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="slide">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="slide">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
</div>

</body>
</html>

Step 2: Style the Slider with CSS

Now, let’s add CSS to style the slider and make it automatically switch between images.

Code:

/* General styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #222;
}

/* Slider container */
.slider {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
}

/* Slides container */
.slides {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 1s ease-in-out;
}

/* Individual slide */
.slide {
    width: 100%;
    flex: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide radio buttons */
input[type="radio"] {
    display: none;
}

/* CSS Keyframes for auto sliding */
@keyframes slide-animation {
    0%, 33% {
        transform: translateX(0%);
    }
    34%, 66% {
        transform: translateX(-100%);
    }
    67%, 100% {
        transform: translateX(-200%);
    }
}

/* Apply animation to slides */
.slides {
    animation: slide-animation 9s infinite;
}

Step 3: Explanation

  1. HTML Structure
    • The <input> radio buttons are used as selectors for different slides.
    • The .slides div contains individual .slide elements, each containing an image.
  2. CSS Styling
    • The .slider container ensures all images are contained properly.
    • The .slides div has a display: flex property to align images in a row.
    • Each .slide is 100% of the .slider container’s width.
    • object-fit: cover; ensures images maintain aspect ratio.
  3. Automatic Sliding with CSS Animation
    • The @keyframes rule defines movement across different slides.
    • The transform: translateX() property moves the slides leftward over time.
    • The .slides container is assigned the animation: slide-animation 9s infinite; to cycle through images every 9 seconds.

Step 4: Customization

  • Change the duration (9s) in the animation to adjust the speed.
  • Add more images by modifying the @keyframes animation.
  • Adjust the width and height of .slider to fit your design.

This method ensures a smooth, automatic slider using only HTML and CSS! 🚀

Our recommendations stem from independent assessments. If you make a purchase through our links, we may earn a commission as part of our affiliate program.

Similar Posts