owl carousel vertical slider – How to use owl carousel vertically?

owl carousel vertical slider is a simple CSS-less jQuery carousel plugin that allows to rotate horizontally or vertically through a sequence of images.

owl carousel vertical slider With Slide/Fade Animations

Vertical Carousel With Slide/Fade Animations Example with demo.

$(".owl-carousel").owlCarousel({
  loop: true,
  autoplay: true,
  items: 3,
  nav: true,
  autoplayHoverPause: true,
  animateOut: 'slideOutUp',
  animateIn: 'slideInUp'
});

owl carousel vertical

vertical slider owl carousel code example
owl-carouselslide vertical

$('.owl-carousel').owlCarousel({ 
   loop: true,
   items: 3,
   animateOut: 'slideOutUp',
   animateIn: 'slideInUp'
 });

css owl-carouselslide vertical

  .item {
        transform: rotate(-90deg);
    }
  .owl-carousel{
         transform: rotate(90deg);
    }

don’t Miss : Bootstrap 4 Testimonial Slider Example

owl carousel vertical slider Example

index.html

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12

main.js

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

CSS code

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

How to use owl carousel vertically?

By default, Owl Carousel is designed to work horizontally, but you can use it vertically by modifying some of its settings.

To use Owl Carousel vertically, you need to change the responsive and onResize options. Here’s an example:

$('.owl-carousel').owlCarousel({
    items: 1,
    loop: true,
    margin: 10,
    responsive: {
        0: {
            items: 1,
            nav: true,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            onResize: function() {
                $('.owl-stage').css('transform', 'translate3d(0px, 0px, 0px)');
            }
        },
        768: {
            items: 3,
            nav: true,
            autoplay: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            onResize: function() {
                $('.owl-stage').css('transform', 'translate3d(0px, 0px, 0px)');
            }
        }
    },
    navText: ["", ""],
    navContainer: '.owl-nav',
    dotsContainer: '.owl-dots'
});

In this example, we set the items option to 1 to show only one item at a time, and set the loop option to true to make the carousel infinite. We also set the margin option to 10 to add some space between the items.

The important part is in the responsive option. We specify two breakpoints: one for screens up to 768px wide, and another for screens wider than 768px. For each breakpoint, we set the items option to 1 and 3, respectively, to show one or three items at a time, and set the nav, autoplay, autoplayTimeout, and autoplayHoverPause options to control navigation and autoplay.

We also set the onResize option to reset the transform property of the .owl-stage element, which is the element that contains the carousel items, to translate3d(0px, 0px, 0px). This is necessary to reset the position of the items after the screen size changes.

Finally, we set the navText, navContainer, and dotsContainer options to customize the navigation and pagination elements of the carousel.

With these settings, the carousel will work vertically, with one or three items shown at a time, depending on the screen size.

I hope you get an idea about owl carousel vertical slider.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.