CODEWITHSUNDEEP
javascriptjquerycssowl-carousel
user3822650
user3822650

Reputation: 143

How to use owl carousel vertically?

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 horizontally. Sorry for langage...

Upvotes: 14

Views: 128702

Answers (5)

Marco Gutierrez
Marco Gutierrez

Reputation: 126

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

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
    items: 3,
    loop: false,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    rewind: true,
    autoplay: true,
    margin: 0,
    nav: true
  });
});
@import "https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.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;
}
<div class="owl-carousel owl-theme">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%200">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%201">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%202">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%203">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%204">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%205">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%206">
  <img class="item" src="https://via.placeholder.com/320x240?text=Slide%207">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

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

Notice that drag must be disabled as it wont work properly

Upvotes: 7

Lekhraj
Lekhraj

Reputation: 521

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

Upvotes: 1

Luis Lobo
Luis Lobo

Reputation: 849

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

Upvotes: 1

dapinitial
dapinitial

Reputation: 133

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

Upvotes: 5

witrin
witrin

Reputation: 3763

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.

Upvotes: 4

Related Questions