Last Updated:

Create an adaptive slider with SVG

SVG
 
Last week we experimented with SVG animation of content and made a slide in the whole page with interesting transitions. Today, we use the same technique to create an adaptive content slider. This time, we used SVG to directly crop the image slides to show the staging layer when flipping. We get a simple, responsive carousel with animated SVG transitions as effects.
 

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

Such a slider will be available for visual perception of the visitor, and beautiful transitions will attract the visitor's eyes to the necessary information.

Step 1. HTML

The HTML structure consists of an unordered list (slider ul.cd) containing slides, and two additional list elements (ul.cd-slider-navigation and ol.cd-slider-controls) for slider navigation.

 

 

Each list item inside the ul.cd-slider consists of an SVG that contains a <clipPath> element (used to change the clipping area of the image slide).

Create an adaptive slider with SVG

Step 2. CSS

The structure of the slider is quite simple: all slides must have opacity: 0, in an absolute position and are placed one by one (top: 0 and left: 0). . A Visible class is added to the selected slide (at the end of the animation clipping) to make it visible.

 

 

Note: we had to use Hack indentation to make SVG more responsive (IE doesn't work well with SVG, so we had to consider some options).

Step 3. JS

To animate the clipping area of the image slide, we animated the 'D' attribute <path> element inside the <clipPath>.

Once the paths were defined, we added a .cd-slider and a data-stepn attribute (one for each slide) equal to the 'D' attribute for a specific path (easy to restore it using JavaScript). We then used the animate() method to animate snap.svg.

 

 

In addition, we've implemented a basic slider for the image gallery (with keyboard and touch swipe navigation, previous/next, and navigation points).