Last Updated:

Vertical animated slider for the site

 

Vertical sliders are very convenient and popular with web designers, they allow you to emphasize and highlight the necessary information on the site without visually piling up the resource with various information. In this tutorial we will look at the process of creating such a slider. The idea is to focus four blocks on one page, with some of the information hidden until the next button is clicked. In this case, the user will be visually informed that he moves to the next point with a simple animation.

 

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 is perfect for an online store, where it is necessary to provide information about the further actions of the buyer. At the same time, correctly and concisely present information without confusing the buyer, and so, let's look at the creation process.

Step 1. HTML

Please note that we used SVG-graphics, this technique is used to improve the speed of loading the page, since the weight of the page is reduced due to the use of such a method, we omitted part of the code with the converted icons, but you can view them in more detail in the sources, moreover, there are many resources with the ability to transform the graphics:

 

 

We'll have a shared container that contains our elements, then we add the ability to switch to the section we need, for this we'll use the choose active class – it will display the active menu item, then we add graphics and xlink to navigate inside the container to the installed information.

Vertical animated slider for JS website

Step 2. CSS

 

Now we need to add some styles, they will help to stylize our slider and give the look that you can observe in the demonstration, we showed several styles for the left and for the right part, if you are at least a little versed in CSS, then everything will be clear to you, since we did not use anything complicated here:

 

 

Step 3. JS

 

Now we need to add a bit of magic that will allow us to correctly and with nice animations display our slider with vertical navigation:

 

 

As a result, we get an excellent vertical content rotator with two sectors to display navigation with icons, and with the other- the information we want with smooth transitions between content.