You’re most likely acquainted with standard sliders that move from side to side. In any case, shouldn’t something be said about vertical sliders? All things considered, we will today! Vertical slideshows have become a popular design pattern as of late as designed search for better approaches to show content. If you are looking for a vertical page slideshow with split-screen shifts based on HTML, CSS, and JS, take a peek at this, as they can add visual oomph to any boring, static website.
The split-screen design is an ideal fit for minimalist websites and an extraordinary decision for landing pages, with one next to the other alternatives.
The designer has utilized a comparative idea in this design. To put it plainly, this is a jQuery and CSS3-based vertical split slider idea that easily slides in left and right slides from various headings as you click the navigation bolts.
This one is a full-screen slider design that utilizes a split-screen animation for the slideshow. You can see a full-screen image with a large text at the centre as you open the demo.
JS Vertical Slideshow in Split Screen Live Preview
See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.
You might not notice the navigation alternatives, but you can find them on the right side. There are four bars present above the other, which likewise denotes that there are a total of four slides.
As the first slide is in the active state, thus, the topmost bar is a bit elongated from the rest. So let us see what happens on clicking the next one.
When you click the next bar, the image splits from the centre, where the left image slides down, and the right image slides up to form the next one. Sliders move in inverse directions to give an outwardly pleasing look.
You must be wondering if clicking on the bars will only help you to navigate through the slides. I guess you are wrong because there is another smoother and easier alternative for it.
You can simply scroll your mouse wheel to reach out to your slide. If you want to showcase your slides differently, this is the one you should go for.
Moreover, to make the slides change on their own as an automatic slideshow, simply set autoplay to true to the slideshow-left class in JavaScript.
As the demo link and the full source codes to make this JS-based vertical slideshow is freely accessible, you can add more changes to the overall model.
| About This Design | |
| Author: Fabio Ottaviani | Demo/Source Code |
| Made with: HTML/CSS(SCSS)/JS | Responsive: Yes |