so i cant add smoth slider, i have a slider and it’s working good but i need it to work with swipe too, chatgpt and copilot are not helping so please help me,my js knowledge is not good
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея фильмов</title>
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.slider-container {
position: relative;
/* width: 100%; */
overflow: hidden;
max-width: 100%; /* 3 x 240px например */
margin: 0 auto;
overflow: hidden;
scroll-behavior: smooth;
cursor: grab;
}
.slider-container:active {
cursor: grabbing;
}
.slider-track {
display: flex;
/* gap: 0; Убирает промежутки между элементами */
transition: transform 0.3s ease-in-out;
cursor: pointer;
width: max-content;
}
.slide {
/* flex: 0 0 calc(100% / 3); Показывать 3 изображения одновременно */
box-sizing: border-box;
padding: 0; /* Убираем внутренние отступы */
margin: 0; /* Убираем внешние отступы */
text-align: center;
flex: 0 0 220px; /* фиксированная ширина */
text-align: center;
}
.slide img {
width: 200px;
height: 120px;
margin: 0; /* Убираем отступы вокруг изображений */
border-radius: 13px;
}
.slider-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.slider-buttons button {
border: none;
padding: 10px 20px;
cursor: pointer;
width: 50px;
height: 50px;
margin-top: -45px;
background-color: none;
color: none;
background: none;
}
.slider-buttons button:hover {
/* background-color: rgba(190, 190, 190, 0.8); */
}
.slider-buttons button img {
width: 50px;
height: 50px;
margin-top: -45px;
background-color: none;
color: none;
margin-left: -28px;
margin-top: -14px;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider-track">
<div class="slide">
<img src="img/a1.jpg" alt="img1">
<h5>Թթենի 1980</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img2">
<h5>Фильм 2</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img3">
<h5>Фильм 3</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img4">
<h5>Фильм 4</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img5">
<h5>Фильм 5</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img6">
<h5>Фильм 6</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img7">
<h5>Фильм 7</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img8">
<h5>Фильм 8</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img9">
<h5>Фильм 9</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img10">
<h5>Фильм 10</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img11">
<h5>Фильм 11</h5>
</div>
<div class="slide">
<img src="img/a1.jpg" alt="img12">
<h5>Фильм 12</h5>
</div>
</div>
<div class="slider-buttons">
<button id="prev"><img src="img/left.png" alt="left"></button>
<button id="next"><img src="img/right.png" alt="right"></button>
</div>
</div>
<script>
const track = document.querySelector('.slider-track');
const slides = Array.from(track.children);
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
let currentIndex = 0;
const slidesToShow = 3; // Количество видимых слайдов
const slideWidth = slides[0].getBoundingClientRect().width;
let startX = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let isDragging = false;
function updateSliderPosition() {
track.style.transition = 'transform 0.3s ease-in-out';
track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
function setSliderPosition() {
track.style.transition = 'none';
track.style.transform = `translateX(${currentTranslate}px)`;
}
function animation() {
setSliderPosition();
if (isDragging) requestAnimationFrame(animation);
}
nextButton.addEventListener('click', () => {
if (currentIndex < slides.length - slidesToShow) {
currentIndex++;
updateSliderPosition();
}
});
prevButton.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
updateSliderPosition();
}
});
// Mouse and touch events
track.addEventListener('mousedown', startDrag);
track.addEventListener('touchstart', startDrag);
track.addEventListener('mousemove', drag);
track.addEventListener('touchmove', drag);
track.addEventListener('mouseup', endDrag);
track.addEventListener('touchend', endDrag);
track.addEventListener('mouseleave', () => {
if (isDragging) endDrag();
});
function startDrag(e) {
isDragging = true;
startX = getPositionX(e);
prevTranslate = currentTranslate;
animationID = requestAnimationFrame(animation);
// Убираем переход, чтобы не было задержки при перетаскивании
track.style.transition = 'none';
}
function drag(e) {
if (!isDragging) return;
const currentPosition = getPositionX(e);
currentTranslate = prevTranslate + currentPosition - startX;
// Ограничение перемещения
const maxTranslate = -(slides.length - slidesToShow) * slideWidth;
if (currentTranslate > 0) {
currentTranslate = 0;
} else if (currentTranslate < maxTranslate) {
currentTranslate = maxTranslate;
}
}
function endDrag() {
isDragging = false;
cancelAnimationFrame(animationID);
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -slideWidth / 4 && currentIndex < slides.length - slidesToShow) {
currentIndex++;
}
if (movedBy > slideWidth / 4 && currentIndex > 0) {
currentIndex--;
}
updateSliderPosition();
}
function getPositionX(e) {
return e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
}
window.addEventListener('resize', () => {
updateSliderPosition();
});
</script>
</body>
</html>i need it to be smooth swipe,like when i grab it it need to allow me to swipe what positioon i want it to be, and when i drop it it stop to work,i hope you understand i am bad at explaining
i tried chatgpt and copilot but they didin’t help