Помогите реализовать слайдер, без использования JavaScript.
- С помощью radio button нужно переключать блоки, в каждом блоке по 4 фото, всего их 4. У меня это получилось, но только с помощью JavaScript.Помогите переписать используя только html,css
Необязательно чтобы radio button были в блоках(как на фото), они могут быть сверху или снизу.
const sliderWrapper = document.querySelector('.slider-wrapper');
const radioButtons = document.querySelectorAll('.radio-button');
radioButtons.forEach((button, index) => {
button.addEventListener('change', () => {
const translateValue = -index * 100;
sliderWrapper.style.transform = `translateX(${translateValue}%)`;
});
});
.slider-container {
height: 200px;
position: relative;
width: 80%;
margin: auto;
overflow: hidden;
}
.slider-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
flex: 0 0 100%;
box-sizing: border-box;
display: flex;
}
.slide img {
width: 25%;
box-sizing: border-box;
}
.slider-radio {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.radio-button {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gray;
margin: 0 5px;
cursor: pointer;
}
.radio-button:checked {
background-color: black;
}
<div class="slider-container">
<div class="slider-wrapper">
<div class="slide">
<img src="https://placehold.co/100x200?text=photo1.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo1.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo1.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo1.jpg" alt="photo">
</div>
<div class="slide">
<img src="https://placehold.co/100x200?text=photo2.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo2.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo2.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo2.jpg" alt="photo">
</div>
<div class="slide">
<img src="https://placehold.co/100x200?text=photo3.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo3.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo3.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo3.jpg" alt="photo">
</div>
<div class="slide">
<img src="https://placehold.co/100x200?text=photo4.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo4.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo4.jpg" alt="photo">
<img src="https://placehold.co/100x200?text=photo4.jpg" alt="photo">
</div>
</div>
<div class="slider-radio">
<input type="radio" class="radio-button" name="slider" checked>
<input type="radio" class="radio-button" name="slider">
<input type="radio" class="radio-button" name="slider">
<input type="radio" class="radio-button" name="slider">
</div>
</div>