by Raelene Morey on August 14, 2019

What is a Vertical Slider?

vertical slider

You’re probably familiar with regular ol’ sliders that move from side to side. But what about vertical sliders? They’re sliders that slider from top to bottom, right?

Well, sort of. Vertical sliders, also known as vertical transitions, have become a popular design trend in recent years as designed look for new ways to display content. From fullwidth and fullscreen vertical page slides to split-screen shifts complete with microinteractions, vertical sliders can add visual oomph to an otherwise boring, static website.

In this post, I’ll introduce you to vertical sliders and show you some pretty cool examples that you can create with the free Smart Slider 3 plugin — all without touching jQuery or JavaScript.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

What is a Vertical Slider?

So what exactly is a vertical slider? And how do they move?

It can be difficult at first to understand wrap your head around what a vertical slider is with just words, it’s something you have to see, and we’ll go through some examples below.

1. Simple Vertical Slider Transitions

previous arrow
next arrow
Slider

 

You might be thinking they’re a type of carousel with images that are displayed from top to bottom and, yes, that’s one type of vertical slideshow.

With Smart Slider 3, for example, you can choose a variety of different vertical transitions, including:

  • Fixed to bottom
  • Parallax to bottom
  • Curtain to top
  • Horizontal spin to bottom
  • Spinning cuboid to bottom

2. Fullsize Vertical Sliders

full size slider

Live Preview

When you take that simple idea and then take it to the next level, you get an impressive fullsize page image slider that changes slides as you scroll down the page. It’s a visually stunning way to display sections of your page in an engaging way that will keep your visitors on the page, helping to reduce your bounce rate.

What’s more, with Smart Slider 3 you can add multiple layers to your slides, including text, headers, buttons and navigation indicators (those three dots to the right of the slider above).

3. Dynamically Generated Vertical Sliders

Dynamically Generated Sliders

Live Preview

If you regularly publish content and you’re looking for a new way to design your blog, why not use a vertical slideshow? With a WordPress plugin that enables you to dynamically generate content, such as Smart Slider 3, you can pull fresh directly content from sources like your WordPress blog, YouTube, and more.

That means you can great your dynamic slider once and it will always automatically display your latest posts. No more manually updating slides!

4. Split Screen Vertical Sliders

Split slider

Live Preview

One of the more impressive types of vertical slider is the split-screen transition. As the user scrolls down the page, each side of the screen moves in independent sections in opposite directions, sliding to revealing new content.

Using this kind of split-vertical web design is simple to implement with Smart Slider 3, and could give your website the visual boost it needs to engage visitors.

5. Product Showcase Slider

Product Showcase Landing Page

Live Preview

Looking for a unique way to design the landing page for your new app? Using fullscreen vertical page transitions, you can keep the focus on your most important content and stop visitors from mindlessly scrolling down the page.

When visitors can only scroll one section at a time, it enables you to highlight certain content and guide visitors to click on call-to-action buttons. Plus, it looks damn cool, right?

6. Group Vertical Slideshow

Slider in conference group

Live Preview

Vertical sliders can be as simple or as complex in design as you want them to be. With Smart Slider 3, you can add as many layers and elements as you want to your individual slides, which can help you create engaging sliders that look less like sliders and more like dynamic pages.

Take the Conference Group slider above, for example. It features a header and text, together with buttons, thumbnail navigations, background images with a subtle Ken Burns effect, along with sections for conference information as a further CTA for booking your seat.

Wrapping Up

And there you have it, a quick guide to vertical sliders. Whether you’re thinking about adding vertical transitions to your WordPress website or landing page, a vertical slider can add an interactive element to your site that is more engaging and eye-catching than a simple static site.

Ready to start playing with vertical sliders? With Smart Slider 3, you can create all of the examples in this post. If you have any questions about how to create vertical sliding transitions, leave a comment below!

Raelene Morey

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.