No infinity loop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipeable Slider</title>
<style>
.slider-container {
width: 100%;
overflow: hidden;
}
.slider {
display: inline-flex;
transition: transform 0.3s ease;
}
.slide {
width: 100vw;
height: 300px;
}
.slide img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider" id="slider">
<div class="slide"><img src="https://via.placeholder.com/300x300/FF0000/FFFFFF" alt="Slide 1"></div>
<div class="slide"><img src="https://via.placeholder.com/300x300/00FF00/FFFFFF" alt="Slide 2"></div>
<div class="slide"><img src="https://via.placeholder.com/300x300/0000FF/FFFFFF" alt="Slide 3"></div>
</div>
</div>
<script>
const slider = document.getElementById("slider");
const slides = document.querySelectorAll(".slide");
let _startX = 0;
let _leftX = 0;
let _index = 0;
// Touchstart event
slider.addEventListener("touchstart", (event) => {
_startX = event.touches[0].clientX; // Record the starting X position of the touch
});
// Touchmove event
slider.addEventListener("touchmove", (event) => {
const _touchX = event.touches[0].clientX; // Get the current X position of the touch
const _moveX = _touchX - _startX; // Calculate the difference in movement
slider.style.transform = `translateX(${_leftX + _moveX}px)`; // Move the slider accordingly
console.log(`_startX : ${_startX}, _touchX : ${_touchX}`);
});
// Touchend event
slider.addEventListener("touchend", (event) => {
const _touchX = event.changedTouches[0].clientX;
const _moveX = _touchX - _startX;
// Check if the swipe distance is greater than a threshold (e.g., 50px)
if (_moveX > 50) {
if (_index > 0) {
_index -= 1; // Swipe right, move to the previous slide
} else {
_index = slides.length - 1;
}
} else if (_moveX < -50) {
if (_index < slides.length - 1) {
_index += 1; // Swipe left, move to the next slide
} else {
_index = 0;
}
}
setPositionByIndex(); // Update slider position
});
// Function to set the slider position based on the index
function setPositionByIndex() {
_leftX = _index * -window.innerWidth;
slider.style.transform = `translateX(${_leftX}px)`;
console.log(`_leftX : ${_leftX}`);
console.log("\n");
}
</script>
</body>
</html>
below script. Added infinity loop condition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinity Swipeable Slider</title>
<style>
.slider-container {
width: 100px;
height: 120px;
/* overflow: hidden; */
border: 1px solid black;
position: relative;
left: 250px;
}
.slider {
display: inline-flex;
transition: transform 0.3s ease;
position: relative;
top: 10px;
}
.slide {
width: 100px;
height: 100px;
text-align: center;
}
.fade-in-animation {
opacity: 0;
animation: fadeIn 0.5s ease-in forwards; /* CSS animation with keyframes */
}
@keyframes fadeIn {
from {opacity: 0;} /* Start invisible */
to {opacity: 1;} /* End fully visible */
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider" id="slider">
<div class="slide" style="background-color: #FF0000">1</div>
<div class="slide" style="background-color: #00FF00">2</div>
<div class="slide" style="background-color: #0000FF">3</div>
<div class="slide" style="background-color: #123456">4</div>
</div>
</div>
<script>
const slider = document.getElementById("slider");
const slides = [].slice.call(slider.children);
let _drct = 0;
let _startX = 0;
let _leftX = 0;
let _index = 0;
// Touchstart event
slider.addEventListener("touchstart", (event) =>
{
// Record the starting X position of the touch
_startX = event.touches[0].clientX;
});
// Touchmove event
slider.addEventListener("touchmove", (event) =>
{
// Get the current X position of the touch
const _touchX = event.touches[0].clientX;
// Calculate the difference in movement
const _moveX = _touchX - _startX;
switchItem(_moveX);
//console.log(`_startX : ${_startX}, _touchX : ${_touchX}, ${switchItem(_moveX)}`);
// Move the slider accordingly
slider.style.transform = `translateX(${_leftX + _moveX}px)`;
});
function switchItem(moveX)
{
if (_drct != Math.sign(moveX))
{
_drct = Math.sign(moveX)
switch (_drct)
{
// →
case 1 :
if (_index == 0)
{
_leftX -= 100;
slider.style.transitionDuration = "0s";
slider.lastElementChild.classList.remove("fade-in-animation");
slider.lastElementChild.classList.add("fade-in-animation");
slider.insertBefore(slider.lastElementChild, slider.firstChild);
}
break;
// ←
case -1 :
if (_index == slider.children.length - 1)
{
_leftX += 100;
slider.style.transitionDuration = "0s";
slider.firstElementChild.classList.remove("fade-in-animation");
slider.firstElementChild.classList.add("fade-in-animation");
slider.appendChild(slider.firstElementChild);
}
break;
// -
case 0 :
break;
default :
break;
}
}
return _drct == 0 ? "-" : _drct > 0 ? "→" : "←";
}
// Touchend event
slider.addEventListener("touchend", (event) =>
{
const _touchX = event.changedTouches[0].clientX;
const _moveX = _touchX - _startX;
// Check if the swipe distance is greater than a threshold (e.g., 50px)
if (_moveX > 30 && _index > 0)
{
_index -= 1; // Swipe right, move to the previous slide
}
else if (_moveX < -30 && _index < slides.length - 1)
{
_index += 1; // Swipe left, move to the next slide
}
// Update slider position
setPositionByIndex();
});
// Function to set the slider position based on the index
function setPositionByIndex()
{
_drct = 0;
_leftX = _index * -100;
slider.style.transitionDuration = "0.3s";
slider.style.transform = `translateX(${_leftX}px)`;
console.log(`_index : ${_index}, _leftX : ${_leftX}`);
console.log("\n");
}
</script>
</body>
</html>