Image Slider

To create an image slider using only HTML and CSS, follow the instructions below. This solution involves using radio buttons to toggle between images and labels to serve as navigation buttons. ### HTML ```html Image Slider

``` ### CSS ```css body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } .slider { position: relative; width: 300px; /* Adjust width as needed */ height: 200px; /* Adjust height as needed */ overflow: hidden; } .slides { position: relative; width: 100%; height: 100%; } .slides img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s; } /* Showing the selected image using the checked radio inputs */ #slide1:checked ~ .slides img:nth-child(1), #slide2:checked ~ .slides img:nth-child(2), #slide3:checked ~ .slides img:nth-child(3) { opacity: 1; } input[type="radio"] { display: none; } .nav { position: absolute; top: 50%; width: 30px; /* Adjust the size of navigation */ height: 30px; /* Same as above */ transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; text-align: center; line-height: 30px; font-size: 24px; cursor: pointer; opacity: 0.8; } .nav.prev { left: 10px; border-radius: 50%; } .nav.next { right: 10px; border-radius: 50%; } .nav.prev:before { content: "<"; } .nav.next:before { content: ">"; } ``` ### Explanation 1. **HTML Structure**: - The container `

` contains radio `` elements for each image for toggling, and `` elements holding the images. - There are also `` elements styled as navigation arrows, which are associated with the radio inputs. 2. **CSS Styling**: - The container is set to `position: relative` and its size can be adjusted as needed. - The `.slides img` elements are positioned absolute, stacked on top of each other, with `opacity: 0` to hide them initially. - The `opacity: 1` rule is applied to the image corresponding to the checked radio button using the general sibling selector (~). - The navigation `.nav` labels are styled to look like buttons, positioned absolutely, and have their `content` property set to arrows. This approach allows you to build a simple image slider with only HTML and CSS, no JavaScript needed.

CSS-Only Image Slider with Radio Inputs

Conversation

CSS-Only Image Slider with Radio Inputs

openai/gpt-4o

Performance Traces

Traces

No span selected