Owl Carousel Slide Vertical

Introduction

Owl Carousel Slide Vertical is a jQuery plugin that enables vertical sliding in Owl Carousel, which is a popular jQuery plugin for creating responsive and touch-enabled carousels.

This plugin extends the functionality of Owl Carousel by adding the option to slide vertically as well as horizontally. With this plugin, you can easily create carousels that slide vertically, allowing you to showcase images or content in a unique and visually appealing way.

Features

Some of the features of Owl Carousel Slide Vertical include:

• Option to slide vertically or horizontally
• Responsive and touch-enabled
• Customizable settings for autoplay, navigation, and more
• Supports all modern browsers and mobile devices

Installation

To use Owl Carousel Slide Vertical in your project, you need to include the necessary files in your HTML file and initialize the plugin in your JavaScript file.

The following code snippets demonstrate how to include the necessary files and initialize the plugin:

<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

<!-- Owl Carousel Slide Vertical CSS -->
<link rel="stylesheet" href="path/to/owl.carousel.slide.vertical.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Owl Carousel Slide Vertical JS -->
<script src="path/to/owl.carousel.slide.vertical.js"></script>

<!-- Initialize Owl Carousel Slide Vertical -->
<script>
$(document).ready(function() {
  $('.owl-carousel').owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    nav: true,
    navText : ["<i class='fas fa-arrow-left'></i>","<i class='fas fa-arrow-right'></i>"]
  });
  $('.owl-carousel-vertical').owlCarouselSlideVertical({
    slideDirection: 'vertical',
    loop: true,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    nav: true,
    navText : ["<i class='fas fa-arrow-up'></i>","<i class='fas fa-arrow-down'></i>"]
  });
});
</script>

Usage

Once you have included the necessary files and initialized the plugin, you can use Owl Carousel Slide Vertical by adding the owl-carousel-vertical class to the HTML element that contains the carousel items.

Here is an example HTML code snippet:

<div class="owl-carousel-vertical owl-carousel owl-theme">
  <div class="item">
    <img src="path/to/image1.jpg">
  </div>
  <div class="item">
    <img src="path/to/image2.jpg">
  </div>
  <div class="item">
    <img src="path/to/image3.jpg">
  </div>
</div>

Customization

Owl Carousel Slide Vertical provides several options that you can customize to meet your needs. The following table lists the available options and their default values:

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | slideDirection | string | 'horizontal' | The direction of sliding. Possible values are 'horizontal' and 'vertical'. | | transitionStyle | string | 'slide' | The transition style for sliding. Possible values are 'slide' and 'fade'. | | mouseDrag | boolean | true | Enable/disable mouse drag. | | touchDrag | boolean | true | Enable/disable touch drag. | | pullDrag | boolean | true | Enable/disable pull drag. | | freeDrag | boolean | false | Enable/disable free drag. | | loop | boolean | false | Enable/disable loop. | | autoplay | boolean | false | Enable/disable autoplay. | | autoplayTimeout | integer | 5000 | The autoplay time interval in milliseconds. | | autoplayHoverPause | boolean | false | Enable/disable autoplay pause on hover. | | smartSpeed | integer | 250 | The animation speed in milliseconds. | | nav | boolean | false | Enable/disable navigation. | | navText | array | ['prev', 'next'] | The navigation text. | | dots | boolean | false | Enable/disable dots. | | dotsEach | boolean | false | The number of items to display dots for. |

To customize the options, you can pass an options object to the owlCarouselSlideVertical method like this:

$('.owl-carousel-vertical').owlCarouselSlideVertical({
  slideDirection: 'vertical',
  loop: true,
  autoplay: true,
  autoplayTimeout: 5000,
  autoplayHoverPause: true,
  nav: true,
  navText : ["<i class='fas fa-arrow-up'></i>","<i class='fas fa-arrow-down'></i>"]
});

Conclusion

Owl Carousel Slide Vertical is a powerful and versatile plugin for creating vertical carousels. With its many customizable options and responsive and touch-enabled functionality, you can easily create visually stunning and engaging carousels that showcase your images or content in a unique and dynamic way.