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>
  ...
</div>

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

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

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

$('.cv-carousel').carouselVertical({
  nav: true,
  navText: ['prev', 'next']
});

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

$('.cv-carousel').carouselVertical({
  items: 3
});

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

$('.cv-carousel').carouselVertical({
  margin: 5
});

7. Go to a specific slide.

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

Changelog:

2020-04-16

• 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.