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

Read Also:  jQuery Multiple Class Selectors Match Examples

owl carousel vertical slider Example

index.html

<div class="owl-carousel owl-theme">
    <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 class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

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;
}

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.