How to Make a Vertical Slider with Slider Revolution?

This article is part of our ongoing Slider Revolution tutorials. You can find all the articles in this series in our Comprehensive Slider Revolution Guide.

When we think of sliders on websites, we usually think of “normal” horizontal ones that slide from left to right. However, more and more designers are opting for less traditional solutions for their sliders. Today we are going to talk about an impressive modern looking slider that is quite easy to make – vertical slider. These sliders usually take up the entire page rather than just the top of it like the horizontal ones. This makes them even more impressive, because they make the page look very dynamic and provide enough space for other elements.like text or buttons from our Goodwish theme, as you can see in the example below.

How to Create a Vertical Slider

Thanks to Slider Revolution, the process of creating a vertical slider that covers the entire page is not complicated at all. In fact, it’s pretty simple, like most things in this excellent plugin.

A Important note before continuing: if you are planning to create a full screen Slider Revolution vertical slider, make sure the size of the images you will use covers the full screen range (1920x1100px).

To get started, go to Slider Revolution from your admin dashboard. The first thing to do, naturally, is to choose the type of slider you want to create. Here, select the type called slider.

Under sizingchoose Fullscreen.

Your next move should be to set the mouse scroll direction. get over your head Navigation > Bullets. hungry Bullet Type change it first. Later, under Location > Orientationchoose Vertical.

The next thing you need to do is decide if you want your slider to rotate after you reach the last slide. We recommend going with this setting as it will look more dynamic, whereas just the stationary slider may seem like a problem with that.

go Mouse > Mouse Scroll Navigation and select the option by saying carousel.

Also, vertical sliders don’t really need arrows, so you can go ahead and turn them off below. Arrows > Arrow Type.

Vertical Sliders on Smaller Devices

Now you have to take into account the fact that many people surf the web using their handsets, most notably their smartphones. If your website has a full-screen vertical slider, you’ll want to make sure it looks and works well on those devices as well. The default scrolling direction for sliders is horizontal: the user swipes left to get to the next slider and the slider changes. With vertical sliders, the direction has to be vertical (up and down) of course, so you’ll need to adjust that too if you want to keep your slider working properly on smaller screens.

To adjust the settings, go to: Tap > Navigation Options. Here, set the scroll direction (Scroll Direction) with Vertical.

And that’s all. You can now start adding your slides and layers as you would with a regular horizontal slider.

As a result

Vertical sliders are easy to create with Slider Revolution and can go a long way in terms of the impression they leave on your visitors. If you’re looking for inspiration, there are plenty of premium WordPress themes that are fully functional and have beautiful vertical sliders, so be sure to check them out.