{"id":8722,"date":"2020-06-22T15:00:16","date_gmt":"2020-06-22T13:00:16","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8722"},"modified":"2022-05-10T16:01:42","modified_gmt":"2022-05-10T14:01:42","slug":"slider-revolution-vertical-slider","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-vertical-slider\/","title":{"rendered":"How to Make a Vertical Slider With Slider Revolution"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When we think about sliders on websites, we usually think about the \u201cregular\u201d horizontal ones that scroll from left to right. However, more and more designers opt for less conventional solutions for their sliders. Today, we\u2019re going to talk about an impressive, modern-looking type of slider that is actually quite easy to make – the vertical slider<\/strong>. These sliders often take up the entire page, rather than just its top part, like horizontal ones. This makes them even more impressive, as they make the page appear very dynamic, and yet provide enough room for other elements<\/strong>, such as text or buttons, as you can see from the example below, from our Goodwish theme<\/a>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"\" <\/div>\n<\/div>[vc_empty_space height=”79px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create a Vertical Slider<\/h2>\n

[\/vc_column_text][vc_column_text]Thanks to Slider Revolution<\/a>, the process of creating a vertical slider, even one that spans the entire page, is not at all complicated. In fact, it\u2019s pretty straightforward, like most things in this excellent plugin.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One important note<\/strong> before we proceed: if you plan to create a fullscreen Slider Revolution vertical slider, make sure the size of the images you will use covers the full-screen span (1920x1100px)<\/strong>. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To get started, head over to Slider Revolution from your admin dashboard. The first thing to do is, naturally, to choose the type of slider you want to create. Here, select the type called Slider<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"How <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Under Sizing<\/strong><\/em>, select Full Screen<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Slider <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Your next move should be to set the mouse scroll direction. Head over to Navigation > Bullets<\/strong><\/em>. Turn on the Bullets Type<\/strong><\/em> switch first. Then, under Position > Orientation<\/strong><\/em>, select Vertical<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bullets <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The next thing to do is to decide whether you want your slider to loop after it reaches the last slide. We recommend you go for this setting, as it will appear more dynamic, whereas the slider that just stops may look like there\u2019s something wrong with it. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Go to Mouse > Mouse Scroll Navigation<\/strong><\/em> and select the option saying Carousel<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Mouse <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Also, vertical sliders don\u2019t really have a need for arrows, so you can go ahead and turn those off under Arrows > Arrow Type<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Arrow <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”slider-revolution-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Vertical Sliders on Smaller Devices<\/h2>\n

[\/vc_column_text][vc_column_text]Now, you have to factor in the fact that a lot of people browse the web using their hand-held devices – most of all, their smartphones. If your website has a fullscreen vertical slider, you want to make sure it looks and works good on those devices too. The default swipe direction for sliders is horizontal: to get to the next slider, the user will swipe left and the slider will change. With vertical sliders the direction will, of course, have to be vertical (up and down), so you have to set that too if you want to assure your slider works properly on smaller screens. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To adjust the settings, head over to Touch > Navigation Options<\/strong><\/em>. Here, set the swipe direction (Swipe Dir<\/strong><\/em>) to Vertical<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Navigation <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And that\u2019s all there is to it. Now you can start adding your slides and layers, like you would with a regular horizontal slider. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]With Slider Revolution, vertical sliders are easy to create and they can get you a long way in terms of the impression they\u2019ll leave on your visitors. If you\u2019re looking for inspiration, there are many premium WordPress themes<\/a> that feature fully functional and beautiful vertical sliders, so make sure to check them out.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Furthermore, make sure to check out our very own Qi Addons for Elementor plugin<\/a>, a collection of versatile and convenient widgets that includes the Vertical Circled Slider<\/a> widget, or the Divided Slider Reveal<\/a>. It\u2019s an innovative, modern solution that you can easily implement on your pages, and there are plenty of other slider widgets in the collection as well.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Vertical slider is a great way to add some extra flair to your website and keep the visitors engaged, and it’s super-easy to set up, too. <\/p>\n","protected":false},"author":6,"featured_media":8729,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8722"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8722\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8729"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}