CSS-only Image Slider

# Image Slider with HTML and CSS I'll create a simple image slider that switches between three images using only HTML and CSS. The slider will have radio inputs for navigation and styled label arrows for previous/next functionality. ## HTML Structure ```html CSS-only Image Slider

``` ## CSS Styling ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f5f5; } .slider-container { position: relative; width: 600px; height: 400px; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Hide radio inputs */ input[type="radio"] { position: absolute; left: -9999px; } /* Slide styles */ .slides { position: relative; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; object-fit: cover; } /* Show selected slide */ #slide1:checked ~ .slides img:nth-child(1), #slide2:checked ~ .slides img:nth-child(2), #slide3:checked ~ .slides img:nth-child(3) { opacity: 1; } /* Navigation dots */ .navigation-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s; } .dot:hover { background-color: rgba(255, 255, 255, 0.8); } #slide1:checked ~ .navigation-dots label:nth-child(1), #slide2:checked ~ .navigation-dots label:nth-child(2), #slide3:checked ~ .navigation-dots label:nth-child(3) { background-color: white; } /* Navigation arrows */ .prev-arrow, .next-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; cursor: pointer; z-index: 10; opacity: 0.7; transition: opacity 0.3s; } .prev-arrow { left: 20px; border-bottom: 4px solid white; border-left: 4px solid white; transform: translateY(-50%) rotate(45deg); } .next-arrow { right: 20px; border-bottom: 4px solid white; border-right: 4px solid white; transform: translateY(-50%) rotate(-45deg); } .prev-arrow:hover, .next-arrow:hover { opacity: 1; } /* Show/hide correct arrows based on active slide */ #prev-1, #next-1 { display: none; } #prev-2, #next-2 { display: none; } #prev-3, #next-3 { display: none; } #slide1:checked ~ .navigation-arrows #prev-1, #slide1:checked ~ .navigation-arrows #next-1 { display: block; } #slide2:checked ~ .navigation-arrows #prev-2, #slide2:checked ~ .navigation-arrows #next-2 { display: block; } #slide3:checked ~ .navigation-arrows #prev-3, #slide3:checked ~ .navigation-arrows #next-3 { display: block; } ``` ## How It Works 1. **Structure**: - Three radio inputs control which slide is shown - Images are stacked with `position: absolute` - Navigation dots and arrows are created with styled labels 2. **Functionality**: - When a radio button is checked (either directly or via its label), the CSS selectors show the corresponding image - The appropriate navigation arrows appear based on which slide is active - The transition effect creates a smooth fade between images 3. **Navigation**: - Clicking the dots at the bottom jumps to a specific slide - The left/right arrows navigate to the previous/next slide in sequence This slider is completely built with HTML and CSS, with no JavaScript required. The transition property provides a smooth fade effect when switching between images.

CSS-only Image Slider: HTML & Fade Transitions

Conversation

CSS-only Image Slider: HTML & Fade Transitions

anthropic/claude-3.7-sonnet

Performance Traces

Traces

No span selected