Вот пример адаптивного кода HTML, CSS и JavaScript для слайдера раздела обзора:
HTML:
<div class="slider-container">
<div class="slider">
<div class="slide">
<img src="review1.jpg" alt="Review 1">
<h3>Review 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slide">
<img src="review2.jpg" alt="Review 2">
<h3>Review 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="slide">
<img src="review3.jpg" alt="Review 3">
<h3>Review 3</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
</div>
</div>
</div>
CSS:
.slider-container {
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
transition: transform 0.5s ease;
}
.slide {
flex: 0 0 100%;
}
.slide img {
width: 100%;
height: auto;
}
.slide h3 {
margin: 10px 0;
}
.slide p {
margin: 0;
}
JavaScript:
const slider = document.querySelector('.slider');
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let currentIndex = 0;
slider.addEventListener('mousedown', startDrag);
slider.addEventListener('touchstart', startDrag);
slider.addEventListener('mousemove', drag);
slider.addEventListener('touchmove', drag);
slider.addEventListener('mouseup', endDrag);
slider.addEventListener('touchend', endDrag);
slider.addEventListener('mouseleave', endDrag);
function startDrag(event) {
if (event.type === 'touchstart') {
startPos = event.touches[0].clientX;
} else {
startPos = event.clientX;
event.preventDefault();
}
isDragging = true;
animationID = requestAnimationFrame(animation);
slider.classList.add('grabbing');
}
function drag(event) {
if (isDragging) {
let currentPosition = 0;
if (event.type === 'touchmove') {
currentPosition = event.touches[0].clientX;
} else {
currentPosition = event.clientX;
}
currentTranslate = prevTranslate + currentPosition - startPos;
}
}
function endDrag() {
cancelAnimationFrame(animationID);
isDragging = false;
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -100 && currentIndex < 2) {
currentIndex += 1;
}
if (movedBy > 100 && currentIndex > 0) {
currentIndex -= 1;
}
setPositionByIndex();
slider.classList.remove('grabbing');
}
function animation() {
setSliderPosition();
if (isDragging) {
requestAnimationFrame(animation);
}
}
function setSliderPosition() {
slider.style.transform = `translateX(${currentTranslate}px)`;
}
function setPositionByIndex() {
currentTranslate = currentIndex * -slider.offsetWidth;
prevTranslate = currentTranslate;
setSliderPosition();
}
Этот код создает адаптивный слайдер раздела обзора. Он состоит из контейнера с выдвижным механизмом, который позволяет пользователям прокручивать несколько обзоров. Слайдер автоматически подстраивается под размер контейнера и поддерживает сенсорное взаимодействие на мобильных устройствах.