Owl Carousel v1.3.2 with Vertical slide animation

javascript jquery html css owl-carousel
user5243536 picture user5243536 · Aug 27, 2015 · Viewed 9.9k times · Source

I am using Owl Carousel v1.3.2 in my code base. This is awesome carousel plugin with fully responsive UI. But recently we got one requirement in which we want slider contents should move vertically upward/downward. I checked documentation as well as plugin code but haven't found any configuration setting for doing that.

I searched through SO and came across following question How to use owl carousel vertically? but even that doesn't solve my problem.

Has anybody written any custom code to achieve this functionality? It's not possible for me to add another carousel library just for this vertical slide animation.

Answer

Richard Yan picture Richard Yan · May 9, 2017

This is some sort of a work around. Use transform: rotate(90deg) on .owl-carousel, or the container class, and rotate 270 deg by transform: rotate(270deg) on the items. You have to deal with the margins problems yourself though, but at least the displaying and animation looks fine.

Related questions

How to reinit a owl carousel 2.0?

I know in the first version of owl carousel we do it like this : var $carousel = $('#carousel'); var owl = $carousel.data('owlCarousel'); owl.reinit({touchDrag: false, mouseDrag: false;}); Ok, but how we do it in the second version, i …

Read More
owl carousel 2 not work with loop and 1 items (Bug Fixed Now)

I work with owl carousel 2 for carousel content. JS: $('#owl-demo').owlCarousel({ loop: true, margin: 10, nav: true, items: 1, }); HTML: <div id="owl-demo" class="owl-carousel"> <div class="item"><h4>1</h4></div> &…

Read More
Owl-carousel: Displaying only one image per slide

Today I discovered owl-carousel and I have been trying to get it to work. I'm trying to make a carousel that cycles through images of dinosaurs. The problem is that 4 dinosaurs show up on the same slide(2 in the fiddle …

Read More