In a previous tutorial we introduced a new library that allows us to animate elements along an SVG path called PathSlider. In addition, we put into practice the use of this library and developed a simple slider, with a minimum of effort. In this tutorial, we will see two more examples that illustrate the potentialities of our library and the SVG paths in general.
For example, we have developed another slider using a closed SVG path as in the previous tutorial, but with some extra elastic effects:
https://codepen.io/lmgonzalves/pen/bvpLyW/
We also wanted to do something a little more original, and we created a full screen and responsive slider of images, using this time an open SVG path, generated automatically with JavaScript:
https://codepen.io/lmgonzalves/pen/EEKEaM/
As you can see, the first of these sliders is very similar to the one in the previous tutorial, we have only added some elastic effects to give it a special touch. So in this tutorial, we will focus on developing the slider of images. However, the code of this first slider can also be found in the GitHub repository.
So, let’s start developing this interesting images slider!
The HTML code for our images slider will be even simpler than the one used for the other two sliders. Let’s see:
As you can see, this time we have not defined the SVG path in our HTML code. That is because we will generate it from the JavaScript code, something that will allow us greater flexibility, adapting the SVG path to the dimensions of the screen.
As this time our slider will be full screen, we must add some necessary styles:
.path-slider { position: relative; width: 100%; height: 100%; background-position: center; } .path-slider__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; }
And the images corresponding to each of the elements of the slider have been defined in this way:
.path-slider__item–1 .item__circle { background-image: url(“../images/img1.jpg”); }
Please note that we have not emphasized the styles needed for the elements to be centered on the SVG path, and the other general styles used. If you have any doubts about it you can take a look at the previous tutorial, and of course, you can also see the full code in the GitHub repository.
So let’s see how to bring our slider to life!
The first thing we will do is insert the SVG path element that we need to move the slider items through it:
var svgNS = ‘http://www.w3.org/2000/svg’; var svgEl = document.createElementNS(svgNS, ‘svg’); var pathEl = document.createElementNS(svgNS, ‘path’); pathEl.setAttribute(‘d’, getSinPath()); pathEl.setAttribute(‘class’, ‘path-slider__path’); svgEl.appendChild(pathEl); document.body.appendChild(svgEl);
As you may have noticed, we have generated the path using the getSinPath function, which is responsible for returning the path in String format taking into account the dimensions of the screen and some other parameters. We have decoupled this function in a separate file for a better organization, and you can see its implementation, as well as a brief description of the available options, in the GitHub repository.
Now let’s see the code for getting the images of the slider items that we have defined in the CSS code, and also the code needed to smoothly switch the images every time we select an item:
var items = document.querySelectorAll(‘.path-slider__item’); var images = []; for (var j = 0; j < items.length; j++) { images.push(getComputedStyle(items[j].querySelector('.item__circle')).getPropertyValue('background-image')); } var imgAnimation; var lastIndex; var setImage = function (index) { if (imgAnimation) { imgAnimation.pause(); sliderContainer.style['background-image'] = images[lastIndex]; sliderContainerBackground.style['opacity'] = 0; } lastIndex = index; sliderContainerBackground.style['background-image'] = images[index]; imgAnimation = anime({ targets: sliderContainerBackground, opacity: 1, easing: 'linear' }); };
Then we need to add the extra element needed to fade the images smoothly, and also set the image for the initial current item (the first one):
var sliderContainer = document.querySelector(‘.path-slider’); var sliderContainerBackground = document.createElement(‘div’); sliderContainerBackground.setAttribute(‘class’, ‘path-slider__background’); setImage(0); sliderContainer.appendChild(sliderContainerBackground);
And having all the above ready, we can initialize our slider with this simple piece of code:
var options = { startLength: ‘center’, paddingSeparation: 100, easing: ‘easeOutCubic’, begin: function (params) { if (params.selected) { setImage(params.index); } } }; var slider = new PathSlider(pathEl, ‘.path-slider__item’, options);
As we explained in the previous tutorial, by default the PathSlider library adds event listeners for click events, so we don’t have to worry about that. All we have to do is to switch the images properly, using the setImage function.
Finally, to get the path adapting to the dimensions of the screen, thus achieving a responsive behavior, we just have to regenerate the SVG path and update items position on resize event:
window.addEventListener(‘resize’, function() { pathEl.setAttribute(‘d’, getSinPath()); slider.updatePositions(); });
This way, our slider will look great in every screen size.
And we are done! We have put into practice once again the possibilities offered by the SVG paths to develop attractive and functional components.
Please go ahead and check the live demos
Play with the code on CodePen
We really hope you have enjoyed the tutorial and that it has been useful!
