Image animation CSS

Technical
1

5721b751e6fa14b631ff7569d9d152e1
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?

2

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>
3

Hi! i did not make it work. please provide more details