如何垂直使用猫头鹰走马灯？

Question

我不想采用插件代码，所以我想知道是否有人已经成功地将插件垂直使用。这个插件只能够水平使用真是遗憾。 对于语言问题，我感到很抱歉...

- user3822650

---

抱歉，各位，垂直幻灯片不会很快出现。我只是不想浪费代码空间去做我永远不会使用的事情。而且Owl2已经很大了。-- Owl的创建者 - Christina

请使用其他幻灯片插件，而不是http://bxslider.com/examples/vertical-slideshow。 - Christina

或者如果您想要轻量级的东西（<2KB minified）：http://baijs.com/tinycarousel/ - thdoan

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>

请查看这个 Codepen：https://codepen.io/marcogu00/pen/eLeWMq

请注意，必须禁用拖动功能，否则它将无法正常工作。

- Marco Gutierrez

Answer 2

这里有一个解决此问题的CodePen: http://codepen.io/dapinitial/pen/xZaRqz

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

- dapinitial

---

这不是 OP 所要求的。 - John Cargo

CodePen使用animate.css，我发现这个链接对于进一步了解很有用：https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html - Nick W

Answer 3

关于2.0 beta版，目前还不能进行垂直滑动。但是，通过重构和插件架构，复杂度已经显著降低，为更多功能留出了空间。其中包括一个API，可以将各种动画效果分解为单独的动画提供者。因此，垂直滑动肯定是可能的。然而，该功能是有雄心壮志的，需要解决一些问题。这里是当前的路线图。

- witrin

Answer 4

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

- Lekhraj

---

拖动将保持不变。 - Harry

Answer 5

仅适用于正方形图像或正方形元素 遵循启用鼠标的示例 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
    };
};
});

- Luis Lobo