How to use owl carousel vertically?

Question

I did not want to take the plugin code so I was wondering if someone had already managed to use plugin vertically. It\'s a shame on the part of this plugin can be used horiz

Answer 1

Works only with square images or square elements Follows example with mouse enabled https://codepen.io/luis7lobo9b/pen/zYrEqKj

<!-- HTML -->
<div class="wrapper">
    <div class="owl-carousel owl-carousel-vertical">
        <div class="item">
            <img src="<!--https://via.placeholder.com/300.png/000/fff-->">
        </div>
        <div class="item">
            <img src="<!--https://via.placeholder.com/300.png/333/fff-->">
        </div>
        <div class="item">
            <img src="<!--https://via.placeholder.com/300.png/666/fff-->">
        </div>
    </div>
</div>

/* CSS */
.wrapper{
    height: 300px;
    width: 300px;
}
.owl-carousel-vertical{
    transform: rotate3d(0, 0, 1, 90deg);
}
.owl-carousel-vertical .item{
    transform: rotate3d(0, 0, 1, -90deg);
}

// JS
$(function(){
    $('.owl-carousel').owlCarousel({
        items: 1,
        loop: false,
        nav: false,
        margin: 0
    });
    // this code below enables drag and drop vertically. Unfortunately I was unable to disable horizontal drag and drop so it will remain active, but we already have something now =D
    $('.owl-carousel').data('owl.carousel').difference = function(first, second) {
    return {
        x: first.x - second.x + (first.y - second.y),
        y: first.y - second.y
    };
};
});

Answer 2

Here is a CodePen that solves this:

http://codepen.io/dapinitial/pen/xZaRqz

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

Answer 3

Regard to the 2.0 beta it's currently not possible to slide vertically. However, the complexity has been significantly reduced by the refactoring and the plugin architecture to make room for more features. This includes in particular an API with which the various animation effects can be broken down into separate animation providers. Thus, a vertical slide would certainly be possible. However, the feature is ambitious and there are some problems to solve. Here is the current roadmap.

Answer 4

You could rotate the carousel and then rotate the items back, like this:

<div class="owl-carousel owl-theme">
  <img class="item" src="http://placehold.it/320x240?text=Slide%200">
  <img class="item" src="http://placehold.it/320x240?text=Slide%201">
  <img class="item" src="http://placehold.it/320x240?text=Slide%202">
  <img class="item" src="http://placehold.it/320x240?text=Slide%203">
  <img class="item" src="http://placehold.it/320x240?text=Slide%204">
  <img class="item" src="http://placehold.it/320x240?text=Slide%205">
  <img class="item" src="http://placehold.it/320x240?text=Slide%206">
  <img class="item" src="http://placehold.it/320x240?text=Slide%207">
</div>

//CSS ______________

.owl-carousel{
   transform: rotate(90deg);
   width: 270px; 
   margin-top:100px;
 } 
.item{
   transform: rotate(-90deg);
 }
.owl-carousel .owl-nav{
   display: flex;
   justify-content: space-between;
   position: absolute;
   width: 100%;
   top: calc(50% - 33px);
 }
div.owl-carousel .owl-nav .owl-prev, div.owl-carousel .owl-nav .owl-next{
    font-size:36px;
    top:unset;
    bottom: 15px; 
}



/* JS ____________*/
$( document ).ready(function() {
    $(".owl-carousel").owlCarousel({
         items: 3,
         loop: false,
         mouseDrag: false,
         touchDrag: false,
         pullDrag: false,
         rewind: true,
         autoplay: true,
         margin: 0,
         nav: true
     });
});

Check this a codepen : https://codepen.io/marcogu00/pen/eLeWMq

Notice that drag must be disabled as it wont work properly