Interactive image comparison slider with Swiper Slider

Image Comparison Slider

Image Comparison Sliders are a great way to present before and after cases and customers’ requirements have become, for better or worse, increasingly frustrating. I’d never seen the technique anywhere before, Image comparison slider but the whole thing should be sliding.

So I’ve played quite a bit with the normal Javascript comparison slider and Swiper Slider and have come up with a non-comprehensive list of Do’s and Don’ts that will hopefully make us reach our goal.

We have created a lightweight, responsive image comparison slider that works on any layout and size. It’s basically two images on top of each other with a vertical handlebar that controls the mask ;D, revealing one image on the left and the other on the right.
I’m sorry I couldn’t write enough description of the workflow, I hope when I have free time I’ll write something.

Feel free to take a look at what I achieved and give me your opinion.

P.S. Due to lack of time I didn’t test the Responsiveness of it 🙁

Features:

Stops on mouse over.
Resume with the same speed that was in the beginning.
Reset mask on slide change.
A title for each slide.
Organized Javascript module pattern.
Control all you need from HTML attributes.

Swiper Slider HTML Layout:

<!-- Slide -->
<div class="swiper-slide no-swiping">

    <figure class="mask-image-container">
        <img src="images/slides/resized/keith-hardy-214817.jpg" alt="">

        <div class="mask-resize-img"> <!-- the resizable image on top -->
            <img src="images/slides/resized/raechel-romero-211500.jpg" alt="">
        </div>

        <span class="mask-handle"></span> <!-- slider handle -->
    </figure> <!-- mask-image-container -->

</div>

Screenshot:

References & Credits:

Photo by Keith Hardy on Unsplash
Photo by Raechel Romero on Unsplash
Photo by Ivars Krutainis on Unsplash
Photo by Giorgio Parravicini on Unsplash
Photo by Andrzej Kryszpiniuk on Unsplash
Photo by Derek Thomson on Unsplash

Slider made with Swiper Slider