Mobile-friendly Vertical Carousel Plugin For jQuery

File Size: 16.6 KB
Views Total: 7063
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mobile-friendly Vertical Carousel Plugin For jQuery

A touch-friendly vertical carousel plugin that allows the user to scroll through a group of slides along the y-axis by clicking the navigation links or swiping up/down the screen. Inspired by Owl Carousel 2 plugin.

How to use it:

1. Link to jQuery library and the Carousel-Vertical plugin's files.

<link rel="stylesheet" href="src/carousel-vertical.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="src/carousel-vertical.js"></script>

2. Create a group of slides for the vertical carousel.

<div class="cv-carousel">
  <div class="item"><h4>1</h4></div>
  <div class="item"><h4>2</h4></div>
  <div class="item"><h4>3</h4></div>
  <div class="item"><h4>4</h4></div>
  <div class="item"><h4>5</h4></div>

3. Call the function on the top container to initialize the vertical carousel.


4. Determine whether or not to show the navigation buttons. Default: true.

  nav: true,
  navText: ['prev', 'next']

5. Specify the number of slides to show at a time. Default: 4.

  items: 3

6. Specify the space between slides. Default: 10px.

  margin: 5

7. Go to a specific slide.

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



  • added compiled css

This awesome jQuery plugin is developed by iannacone. For more Advanced Usages, please check the demo page or visit the official website.