Авторизация
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
После регистрации вы можете задавать вопросы и отвечать на них, зарабатывая деньги. Ознакомьтесь с правилами, будем рады видеть вас в числе наших авторов!
Вы должны войти или зарегистрироваться, чтобы добавить ответ.
Для создания вертикального слайдера на сайте можно использовать CSS и JavaScript. Вот пример кода:
HTML:
«`html
«`
CSS:
«`css
.slider-container {
height: 300px; /* Высота контейнера слайдера */
overflow: hidden; /* Скрытие содержимого, выходящего за пределы контейнера */
}
.slider {
display: flex; /* Отображение слайдов в ряд */
flex-direction: column; /* Вертикальное расположение слайдов */
height: 100%; /* Высота слайдера равна высоте контейнера */
transition: transform 0.5s ease; /* Плавное переходное движение */
}
.slide {
height: 100%; /* Высота слайда равна высоте слайдера */
width: 100%; /* Ширина слайда равна ширине слайдера */
}
«`
JavaScript:
«`javascript
const slider = document.querySelector(‘.slider’);
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
slider.addEventListener(‘mousedown’, startDragging);
slider.addEventListener(‘touchstart’, startDragging);
slider.addEventListener(‘mouseup’, stopDragging);
slider.addEventListener(‘touchend’, stopDragging);
slider.addEventListener(‘mouseleave’, stopDragging);
slider.addEventListener(‘mousemove’, drag);
slider.addEventListener(‘touchmove’, drag);
function startDragging(event) {
if (event.type === ‘touchstart’) {
startPos = event.touches[0].clientY;
} else {
startPos = event.clientY;
slider.style.cursor = ‘grabbing’;
}
isDragging = true;
animationID = requestAnimationFrame(animation);
}
function stopDragging() {
cancelAnimationFrame(animationID);
isDragging = false;
const movedBy = currentTranslate — prevTranslate;
if (movedBy < -100) { // Прокрутка вниз } if (movedBy > 100) {
// Прокрутка вверх
}
slider.style.cursor = ‘grab’;
}
function drag(event) {
if (isDragging) {
let currentPosition = 0;
if (event.type === ‘touchmove’) {
currentPosition = event.touches[0].clientY;
} else {
currentPosition = event.clientY;
}
currentTranslate = prevTranslate + currentPosition — startPos;
}
}
function animation() {
setSliderPosition();
if (isDragging) {
requestAnimationFrame(animation);
}
}
function setSliderPosition() {
slider.style.transform = `translateY(${currentTranslate}px)`;
}
«`
Этот код создает вертикальный слайдер, который можно прокручивать вверх и вниз с помощью мыши или сенсорного экрана. Вы можете добавить свои собственные стили и функциональность в соответствии с вашими потребностями.