How to make owl carousal vertical

user_3064670 0
Viewed 261

I'm trying to make the owl carousel vertical as shown below image:

Kindly suggest if anyone knows some other similar control.

enter image description here

$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 3,
    margin: 10,
    rtl: true,
    center: true,
    loop: true,
    nav: true,
    animateOut: 'slideOutUp',
    animateIn: 'slideInUp'
  });
});
.home-demo .item {
  background: #ff3f4d;
}

.home-demo h2 {
  color: #FFF;
  text-align: center;
  padding: 5rem 0;
  margin: 0;
  font-style: italic;
  font-weight: 300;
}

.owl-carousel .owl-item.active.center {
  margin-top: 0 !important;
  position: relative;
  z-index: 999;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.owl-carousel .owl-item {
  transform: scale(0.7);
  padding: 10px 0px;
  transition: all 0.5s;
  transform: scale(60%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

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

<div class="home-demo">
  <h3>Carousel</h3>
  <div class="owl-carousel owl-theme">
    <div class="item">
      <h2>Swipe</h2>
    </div>
    <div class="item">
      <h2>Drag</h2>
    </div>
    <div class="item">
      <h2>Responsive</h2>
    </div>
    <div class="item">
      <h2>CSS3</h2>
    </div>
    <div class="item">
      <h2>Fast</h2>
    </div>
    <div class="item">
      <h2>Easy</h2>
    </div>
    <div class="item">
      <h2>Free</h2>
    </div>
    <div class="item">
      <h2>Upgradable</h2>
    </div>
    <div class="item">
      <h2>Tons of options</h2>
    </div>
    <div class="item">
      <h2>Infinity</h2>
    </div>
    <div class="item">
      <h2>Auto Width</h2>
    </div>
  </div>
</div>

owl css html javascript
1 Answers

Add owl-carousel slider properties and some css

$(function(){
  $('.owl-carousel').owlCarousel({
    items: 1,
    loop: false,
    nav: false,
    margin: 0,
    autoplay: true,
    dots:false
  });

  $('.owl-carousel').data('owl.carousel').difference = function(first, second) {
    return {
        x: first.x - second.x + (first.y - second.y),
        y: first.y - second.y
    };
};
});
.home-demo .item {
  background: #ff3f4d;
}

.home-demo h2 {
  color: #FFF;
  text-align: center;
  padding: 5rem 0;
  margin: 0;
  font-style: italic;
  font-weight: 300;
}

.owl-carousel {
  display:block
}

.owl-carousel .owl-item.active.center {
  margin-top: 0 !important;
  position: relative;
  z-index: 999;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.owl-carousel .owl-item {
  transform: scale(0.7);
  padding: 10px 0px;
  transition: all 0.5s;
  transform: scale(60%);
}

.owl-carousel-vertical{
  transform: rotate3d(0, 0, 1, 90deg);
}

.owl-carousel-vertical .item{
  transform: rotate3d(0, 0, 1, -90deg);
}

.owl-nav{ transform: rotate3d(0, 0, 1, 0deg); }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

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

<div class="home-demo">
  <h3>Carousel</h3>
  <div class="owl-carousel owl-theme owl-carousel-vertical">
    <div class="item">
      <h2>Swipe</h2>
    </div>
    <div class="item">
      <h2>Drag</h2>
    </div>
    <div class="item">
      <h2>Responsive</h2>
    </div>
    <div class="item">
      <h2>CSS3</h2>
    </div>
    <div class="item">
      <h2>Fast</h2>
    </div>
    <div class="item">
      <h2>Easy</h2>
    </div>
    <div class="item">
      <h2>Free</h2>
    </div>
    <div class="item">
      <h2>Upgradable</h2>
    </div>
    <div class="item">
      <h2>Tons of options</h2>
    </div>
    <div class="item">
      <h2>Infinity</h2>
    </div>
    <div class="item">
      <h2>Auto Width</h2>
    </div>
  </div>
</div>

For more reference please visit this link Click..

user_93166030
Related