Pure CSS Image Slider

Okay, let's build an image slider using just HTML and CSS, as per your requirements. We'll use radio buttons to control which image is visible, and `label` elements acting as navigation arrows and dots. The `position: absolute` property will stack the images, and the `opacity` property with a `transition` will provide the fade effect. --- ### HTML Structure (`index.html`) ```html Pure CSS Image Slider

``` --- ### CSS Styling (`style.css`) ```css body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; font-family: sans-serif; } .slider-container { width: 600px; /* Max width of the slider */ height: 400px; /* Fixed height for the slider */ position: relative; overflow: hidden; /* Hide parts of images outside the container */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; } /* Hide the actual radio buttons */ .slider-container input[type="radio"] { display: none; } .slider-images { position: relative; /* To contain absolutely positioned images */ width: 100%; height: 100%; } .slider-images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Ensures images cover the area without distortion */ opacity: 0; /* Hide all images by default */ transition: opacity 0.5s ease-in-out; /* Fade effect */ } /* Show the active image based on the checked radio button */ #image1-radio:checked ~ .slider-images img:nth-child(1), #image2-radio:checked ~ .slider-images img:nth-child(2), #image3-radio:checked ~ .slider-images img:nth-child(3) { opacity: 1; } /* --- Slider Dots (Indicators) --- */ .slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; /* Ensure dots are above images */ display: flex; gap: 10px; /* Space between dots */ } .dot { display: block; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */ cursor: pointer; transition: background-color 0.3s; } .dot:hover { background-color: rgba(255, 255, 255, 0.8); } /* Highlight the active dot */ #image1-radio:checked ~ .slider-dots .dot:nth-child(1), #image2-radio:checked ~ .slider-dots .dot:nth-child(2), #image3-radio:checked:checked ~ .slider-dots .dot:nth-child(3) { background-color: #fff; /* Solid white for active dot */ } /* --- Slider Arrows (Previous/Next Buttons) --- */ .slider-arrows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Allows clicks to pass through to underlying elements by default */ } .arrow { position: absolute; top: 50%; transform: translateY(-50%); color: white; background-color: rgba(0, 0, 0, 0.5); padding: 10px 15px; font-size: 24px; font-weight: bold; cursor: pointer; user-select: none; /* Prevent text selection */ pointer-events: auto; /* Enable clicks on arrows */ display: none; /* Hide all arrows by default */ transition: background-color 0.3s; border-radius: 4px; } .arrow:hover { background-color: rgba(0, 0, 0, 0.8); } .prev-arrow { left: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; } .next-arrow { right: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Use content property for arrow symbols */ .prev-arrow::before { content: '\2039'; /* Unicode for single left-pointing angle quotation mark */ } .next-arrow::before { content: '\203A'; /* Unicode for single right-pointing angle quotation mark */ } /* Show the appropriate arrows based on the active image */ /* When image1-radio is checked, show arrows to image3 (prev) and image2 (next) */ #image1-radio:checked ~ .slider-arrows label[for="image3-radio"].prev-arrow, #image1-radio:checked ~ .slider-arrows label[for="image2-radio"].next-arrow { display: block; } /* When image2-radio is checked, show arrows to image1 (prev) and image3 (next) */ #image2-radio:checked ~ .slider-arrows label[for="image1-radio"].prev-arrow, #image2-radio:checked ~ .slider-arrows label[for="image3-radio"].next-arrow { display: block; } /* When image3-radio is checked, show arrows to image2 (prev) and image1 (next) */ #image3-radio:checked ~ .slider-arrows label[for="image2-radio"].prev-arrow, #image3-radio:checked ~ .slider-arrows label[for="image1-radio"].next-arrow { display: block; } ``` --- ### How to use: 1. **Save the HTML:** Save the first code block as `index.html`. 2. **Save the CSS:** Save the second code block as `style.css` in the *same directory* as `index.html`. 3. **Image Files:** Create three image files named `image1.png`, `image2.png`, and `image3.png`. Place them in the *same directory* as `index.html` and `style.css`. You can use any images you like, just make sure they have these filenames. * **Tip:** If you don't have images ready, you can use placeholder services: * `https://via.placeholder.com/600x400/FF5733/FFFFFF?text=Image+1` * `https://via.placeholder.com/600x400/33FF57/000000?text=Image+2` * `https://via.placeholder.com/600x400/3357FF/FFFFFF?text=Image+3` Replace `src="image1.png"` with these URLs if you want to test without local files. 4. **Open `index.html`:** Open the `index.html` file in your web browser. You should now see an image slider where you can click on the left/right arrows or the bottom dots to switch between images with a smooth fade effect!

Pure CSS Image Slider with Radio Buttons

Conversation

Pure CSS Image Slider with Radio Buttons

gemini/gemini-2.5-flash-preview

Performance Traces

Traces

No span selected