Question

我不想接受插件代码，所以我想知道是否有人已经设法垂直使用插件。这个插件的一个耻辱可以水平使用。抱歉langage ...

Answer 1

以下是解决此问题的CodePen：

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

Answer 2

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

Answer 3

您可以旋转圆盘传送带，然后向后旋转项目，像这样：

exec('SELECT * FROM database.tablename') at [servername]

为此检查一个密码笔：https://codepen.io/marcogu00/pen/eLeWMq

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

Answer 4

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

Answer 5

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

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

5 个答案: