jQuery div Vertical Content Slider – carousel-vertical.js

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	carousel-vertical
Author:	Simon Iannacone
Licence:	MIT Licence
Published:	January 17, 2024
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	4.49 KB

Demo Download

How to Make div Vertical Content Slider

1. After downloading this project, include the carousel-vertical plugin’s CSS and JavaScript file (just after the jQuery) into your HTML document.

<!-- 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>

2. Now, create a basic HTML structure for vertical carousel as follows:

<div class="cv-carousel">
   <div class="item">
     Your first div content goes here.
   </div>
   <div class="item">
      This is second block.
   </div>
   <div class="item">
      This is third div block.
   </div>
   .
   .
   .
   <div class="item">
   Content of N div.
   </div>
</div>

Tip: Place your content between <div class="item">. You can put anything like images or text etc.

3. Initialize the plugin in jQuery document ready function to active the div vertical content slider.

$(document).ready(function(){

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

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

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

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.