How can we achieve this swiping animation in funnelish for images so we don’t have to add images on top of each other in mobile view… Please Yassine and Fath, do you have the CSS?
You can try
<style>
.slider {
width: 80%;
max-width: 600px;
overflow: hidden;
border: 2px solid #ddd;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
padding: 20px;
text-align: center;
}
</style>
<div class="slider"> (add class on the container)
<div class="slides"> (add class on the container)
<div class="slide"> (add class on the container)
</div>
</div>
</div>
<script>
const slides = document.querySelector('.slides');
const slideCount = document.querySelectorAll('.slide').length;
let currentIndex = 0;
let startX = 0;
let endX = 0;
function goToSlide(index) {
slides.style.transform = `translateX(-${index * 100}%)`;
}
function handleSwipe() {
if (startX - endX > 50) {
// Swipe left
currentIndex = (currentIndex + 1) % slideCount;
} else if (endX - startX > 50) {
// Swipe right
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
}
goToSlide(currentIndex);
}
slides.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
slides.addEventListener('touchmove', (e) => {
endX = e.touches[0].clientX;
});
slides.addEventListener('touchend', handleSwipe);
// Optional: Automatic sliding
setInterval(() => {
currentIndex = (currentIndex + 1) % slideCount;
goToSlide(currentIndex);
}, 3000); // Change slide every 3 seconds
</script>
Hi! i did not make it work. please provide more details