javascript - 如何垂直使用 Owl Carousel ？

Question

我不想拿插件代码所以我想知道是否有人已经设法垂直使用插件。遗憾的是这个插件可以水平使用。 抱歉语言...

Answer 1

您可以旋转旋转木马，然后将元素旋转​​回来，如下所示:

$(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>

检查这个代码笔:https://codepen.io/marcogu00/pen/eLeWMq

请注意必须禁用拖动，因为它不会正常工作