CSS Image Slider

Okay, this is a classic CSS-only slider challenge! We'll use the "checkbox hack" (or in this case, "radio button hack") where the `:checked` pseudo-class of a hidden radio button is used to control the styles of other elements. Here's the HTML and CSS: **index.html:** ```html CSS Image Slider

``` **style.css:** ```css body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; margin: 0; font-family: sans-serif; } .slider-container { width: 600px; /* Adjust as needed */ height: 400px; /* Adjust as needed */ position: relative; /* Crucial for absolute positioning of children */ overflow: hidden; /* Hides parts of images if they are larger than container */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 8px; } /* Hide the actual radio buttons */ .slider-container > input[type="radio"] { display: none; /* Or position: absolute; left: -9999px; */ } .images-wrapper { width: 100%; height: 100%; position: relative; /* Establishes stacking context for images */ } .slider-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Fills the container, might crop */ opacity: 0; visibility: hidden; /* Ensure non-interactivity when hidden */ transition: opacity 0.5s ease-in-out; z-index: 1; /* Base stacking order for images */ } /* --- Show the checked image --- */ /* When #radio-img1 is checked, show #img1 (which is the 1st .slider-img) */ #radio-img1:checked ~ .images-wrapper #img1, /* When #radio-img2 is checked, show #img2 (which is the 2nd .slider-img) */ #radio-img2:checked ~ .images-wrapper #img2, /* When #radio-img3 is checked, show #img3 (which is the 3rd .slider-img) */ #radio-img3:checked ~ .images-wrapper #img3 { opacity: 1; visibility: visible; z-index: 2; /* Bring active image to the top */ } /* --- Navigation Arrows --- */ .navigation-arrows { z-index: 3; /* Arrows on top of images */ } .arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px 15px; cursor: pointer; font-size: 24px; font-weight: bold; user-select: none; /* Prevent text selection */ border-radius: 50%; display: none; /* Hide all arrows by default */ } .prev-arrow { left: 15px; } .next-arrow { right: 15px; } /* --- Show relevant arrows based on checked radio --- */ /* When #radio-img1 is checked, show #prev1 and #next1 */ #radio-img1:checked ~ .navigation-arrows #prev1, #radio-img1:checked ~ .navigation-arrows #next1 { display: block; } /* When #radio-img2 is checked, show #prev2 and #next2 */ #radio-img2:checked ~ .navigation-arrows #prev2, #radio-img2:checked ~ .navigation-arrows #next2 { display: block; } /* When #radio-img3 is checked, show #prev3 and #next3 */ #radio-img3:checked ~ .navigation-arrows #prev3, #radio-img3:checked ~ .navigation-arrows #next3 { display: block; } .arrow:hover { background-color: rgba(0, 0, 0, 0.8); } /* --- Optional: Navigation Dots --- */ .navigation-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; /* Dots on top */ } .dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; } .dot:hover { background-color: rgba(255, 255, 255, 0.8); } /* Highlight active dot */ #radio-img1:checked ~ .navigation-dots #dot1, #radio-img2:checked ~ .navigation-dots #dot2, #radio-img3:checked ~ .navigation-dots #dot3 { background-color: white; } ``` **To use this:** 1. Save the HTML as `index.html`. 2. Save the CSS as `style.css` in the same directory. 3. Replace the `https://via.placeholder.com/...` URLs with your actual `image1.png`, `image2.png`, and `image3.png` paths. Make sure these image files are in the same directory as your HTML/CSS files, or update the paths accordingly (e.g., `images/image1.png`). 4. Open `index.html` in your web browser. **Explanation:** 1. **HTML Structure:** * `slider-container`: The main wrapper. `position: relative` is key for positioning its children. * `input type="radio"`: Three radio buttons. They share the same `name` attribute (`slider-image`) so only one can be checked at a time. The first one is `checked` by default. These will be hidden with CSS. * `.images-wrapper`: A container for the actual `` tags. This helps in targeting. * `` tags: Each image has a unique `id` (e.g., `img1`) and a common class (`slider-img`). * `.navigation-arrows`: A container for the previous/next labels. * `` elements for arrows: * Each image effectively has its own set of previous/next labels (e.g., `prev1`, `next1` for when `radio-img1` is active). * The `for` attribute of each label points to the `id` of the radio button that should be checked when the label is clicked. For example, the "next" arrow for Image 1 (`next1`) has `for="radio-img2"`, so clicking it checks the radio button for Image 2. * They are given unique `id`s to be targeted by CSS for conditional display. * `.navigation-dots` (Optional): Provides direct navigation to specific slides. Each dot is a label for a radio button. 2. **CSS Styling:** * **Hiding Radios:** `input[type="radio"] { display: none; }` makes the actual radio buttons invisible. * **Image Stacking & Hiding:** * `.slider-img` are `position: absolute`, so they stack on top of each other within `.images-wrapper`. * They have `opacity: 0;` and `visibility: hidden;` by default, making them invisible. * `transition: opacity 0.5s ease-in-out;` creates the fade effect. * **Showing the Active Image:** * The magic happens with the general sibling combinator (`~`) and the `:checked` pseudo-class. * Example: `#radio-img1:checked ~ .images-wrapper #img1` means: "If the radio button with `id="radio-img1"` is checked, then select the element with `id="img1"` that is a descendant of `.images-wrapper` (which is a sibling of the radio button), and apply these styles." * The selected image gets `opacity: 1; visibility: visible;`. * **Arrow Styling & Positioning:** * `.arrow` labels are `position: absolute` within the `slider-container`. * `top: 50%; transform: translateY(-50%);` vertically centers them. * They are hidden by default (`display: none;`). * **Showing Relevant Arrows:** * Similar to images, `#radio-img1:checked ~ .navigation-arrows #prev1` (and `#next1`) shows the specific previous/next arrows associated with the currently displayed image. * **Dot Styling (Optional):** * Dots are styled and positioned at the bottom. * The active dot is highlighted using the same `:checked ~ .selector` pattern. This solution fulfills all the requirements using only HTML and CSS, leveraging the power of CSS selectors and pseudo-classes for interactivity.

CSS-Only 3-Image Slider with Radio Buttons

Conversation

CSS-Only 3-Image Slider with Radio Buttons

gemini/gemini-2.5-pro-preview

Performance Traces

Traces

No span selected