animated-svg-image-slider
August 27, 2015 | 26 Feedbacks

Animated SVG Image Slider

A simple, responsive carousel with animated SVG paths used as transition effects.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Last week we’ve been experimenting with SVG paths to animate the content of a full-page hero slider. Today we use the same technique to create a responsive carousel. This time, though, we used SVG paths to directly clip the slide images, with no need to show an intermediate layer.

Images: Unsplash

Creating the structure

The HTML structure is composed by an unordered list (ul.cd-slider), containing the slides, and two additional list elements ( ul.cd-slider-navigation and ol.cd-slider-controls) for the slider navigations.

Each list item inside the ul.cd-slider is composed by an svg containing a <clipPath> element (used to change the clipping area of the slide image) and an <image> element (whose clip-path url attribute is the <clipPath> id).

Adding style

The slider structure is quite basic: all slides have an opacity: 0, are in absolute position and are placed one on top of the other (top: 0 and left:0). The .visible class is added to the selected slide (at the end of the clipping animation) to make it visible, while the .is-animating class is added to the list item during the clipping animation (z-index: 3 so that it is over the li.visible item).

Note: we had to use the Padding Hack to make the svg responsive (IE assumes svg height to be 150px if you don’t explicitly define it). Basically, we set the div.cd-svg-wrapper height to 0 and its padding-bottom to 57.15% (to preserve svg proportion, in our case 800/1400), and set the svg height and width to 100%.

Events handling

To animate the slide image clipping area, we animated the 'd' attribute of the <path> element inside the <clipPath>.
First of all, we had to define the different steps of our animation: we used the same process described in the Animated SVG Hero Slider article (Events handling section); but in this case, we needed only 6 steps (3 steps to animate from a slide to the next one and 3 more steps to animate from a slide to the previous one).

Once defined the paths, we added to the .cd-slider a data-stepn attribute (one for each step) equal to the 'd' attribute of the defined path (to easily retrieve it with JavaScript).

We then used the animate() method provided by Snap.svg to animate the path element.

Besides, we implemented a basic slider for the image gallery (with keyboard and touch swipe navigation, previous/next and dots navigation).

Changelog

Aug 27, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • form9hide

    How would you do this without an image? I’m kind of seeing this as a nice page transition.

  • someonecares2

    Super cool! Thanks for sharing!

  • EliC

    I would like to know how to create these SVG stuff, what is the best place to start?

  • AdamJeffreyWeinberg

    i added a timer to this by inserting this code after the nextSlide function at line 86 in main.js

    setInterval(function() {

    $(‘.next-slide’).trigger(‘click’);

    }, 3000);

    • AdamJeffreyWeinberg

      but not sure yet how to pause it on hover, lol

      • Mark Mefri

        try this code after the nextSlide function

        function autoslide() {
        $(‘.next-slide’).trigger(‘click’);
        }

        id = setInterval(autoslide, 4000);
        $(“.cd-slider”).hover( function() {
        clearInterval(id);
        }, function(){
        id = setInterval(autoslide, 4000);
        }
        );

        • AdamJeffreyWeinberg

          it works!

          • AdamJeffreyWeinberg

            now, what could i do to make this full screen?

        • http://www.besants.com Besant Gnanapragasam

          Thank you :)

        • Mat Teague

          Thank you this is amazing!!

  • Paco Official

    Awesome

  • drc15

    Hey Sebastiano. This site is great!
    But where can I see a demo live?

    Thank you!
    D

  • http://megapixelstock.com megapixelstock

    Hi, you are doing great things!!! keep going!!!

  • Trilulilu Crocodilu

    hi great products keep it up.one question though.how do i resize the slider to 1600×700 px?

    i went through a few changes but i can’t seem to get it right.a slidebar apears.thanks

  • sergi

    this is grate slider i am crazy about it but it has error in console Uncaught TypeError: target.className.indexOf is not a function and can you fix it? :D

    • http://codyhouse.co Claudia Romano

      Hi Sergi, I just checked the demo on Chrome (46.0.71) and there’s no error in the console. Which browser are you using and are you experiencing this issue with our demo? Thanks

      • sergi

        error is only in opera :D

  • Louis

    Hello, that’s crazy, thanks ! :) But how can i put more than 1 slider pls ? It makes a bug, when i duplicate it and put autoslide fonction by Mark Mefri. Thanks.

  • Nevimi

    Thanks for example. I have a question: how can I replace the image to video in the slider?

  • http://www.fedeweb.net Fedeweb

    Hi,

    how can I have multiple sliders with the autoplay function? It works with one slider, but with more sliders, only the first one works.

    Thanks in advance,

    Federico

  • Ameen Ami

    hi – how can i resize this slider?

  • http://henriquemacedo.pt/ Henrique Macedo

    Any solution for this div inside the ‘cd-svg-wrapper’?

    Title

    Gives error in the W3C Validator: “HTML start tag ‘div’ in a foreign namespace context.”
    Anyone put this in ?

  • http://maclifestyle.pl/ Maciej Buchert

    Hello. I div with text in .cd-svg-wrapper, but before svg tag. Looks great, but It’s no effect on the animation. Some ideas?

  • Claudiu Furca

    Hey,
    Where do you specify, which sliding option you are currently running?
    I presume is somewhere in the js, but I could not locate it.