jQuery Vertical Content Slider From Top to Bottom

Do you want to build a simple and lightweight slider for text? This jQuery vertical Content slider comes with Next/Pre buttons to slide the HTML element from top to bottom.

It allows you to add the image, video, content and any of HTML element. It is a touch-enabled slider with support of cross-platform.

The “Carousel Vertical” plugin is base on div HTML element which enables you to add content and slide it from bottom to top or top to bottom by using the navigation buttons.

You can easily create a nice and clean a responsive vertical carousel for your any kind of project. It has the built-in swipe and touches support function to navigate the slider items.

In addition, by placing any of HTML elements such as video, images, text, iframe, etc you can easily create the slider without code on from scratch.

Basically, this slider is inspired to Owl Carousel 2 but it works vertically.

How to Make jQuery Vertical Content Slider

You can download the source files and then add the required jQuery and CSS files into your project. You need to include the following files.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Carousel Vertical CSS -->
<link rel="stylesheet" href="css/carousel-vertical.css">

<!-- Carousel Vertical JS -->
<script src="js/carousel-vertical.js"></script>

After that, you need to create the HTML which is very easy and simple. All you need to define the wrapper element cv-carousel and define the list of child divs with a class item.

<div class="cv-carousel">
   <div class="item">
     you can add your content here.
   </div>
   <div class="item">
      It allow you to add a HTML element such as H, P and Span etc.
   </div>
   <div class="item">
      You can also add a video.
   </div>
   <div class="item">
    	Or can add the image, links etc.
   </div>
</div>

By simply initialize jQuery document ready function, you can activate the vertical text slider.

$(document).ready(function(){

   $('.cv-carousel').carouselVertical();
					
});

To move the slider’s item programmatically use the following syntax.

$('.cv-carousel').trigger('goTo', [5]); 
//or
$('.cv-carousel').carouselVertical().trigger('goTo', [5]);

That’s it. The slider doesn’t have too many options and the setting is because to keep it simple. If you want a slider which doesn’t overload your site then this could be a good option.

Also, you can use this vertical slider if you don’t need too many options but just want to showcase the large content in a good manner.