如何垂直使用猫头鹰旋转木马？

我不想采用插件代码，所以我想知道是否有人已经设法垂直使用插件。 这个插件的一个耻辱可以横向使用。 抱歉langage …

Answer 1

这是一个CodePen解决了这个问题：

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

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

Answer 2

关于2.0测试版，它目前无法垂直滑动。 但是，重构和插件架构大大减少了复杂性，为更多function腾出空间。 这尤其包括 API，利用该API可以将各种动画效果分解为单独的动画提供者。 因此，垂直滑动肯定是可能的。 但是，该function雄心勃勃，有一些问题需要解决。 这是当前的路线图 。

Answer 3

您可以旋转旋转木马，然后将项目旋转​​回来，如下所示：

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

检查这个codepen： https ：//codepen.io/marcogu00/pen/eLeWMq

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