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

4

Add HTML in the HTML ELEMENT that you want to show the carousel:

<div class="slider"> 
   <div class="slides"> 
           <div class="slide"> 
                 <img src- "image1.jpg" alt ="image" />
           </div>
          <div class="slide"> 
                 <img src- "image2.jpg" alt ="image" />
           </div>
    </div>
</div>

Add css in the CUSTOM CODES:

.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;
}

Add Custom JS > CUSTOM CODES:

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