Javascript 如何垂直使用猫头鹰转盘？

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

---

抱歉langage…

关于2.0测试版，目前无法垂直滑动。然而，重构和插件架构为更多功能腾出了空间，大大降低了复杂性。这尤其是一个API，使用它可以将各种动画效果分解为单独的动画提供程序。因此，垂直滑动肯定是可能的。然而，这一特性是雄心勃勃的，还有一些问题需要解决。这是电流。

这是一个解决此问题的代码笔：

---

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

<div class="owl-carousel owl-theme">
  <img class="item" src="http://placehold.it/320x240?text=Slide%200">
  <img class="item" src="http://placehold.it/320x240?text=Slide%201">
  <img class="item" src="http://placehold.it/320x240?text=Slide%202">
  <img class="item" src="http://placehold.it/320x240?text=Slide%203">
  <img class="item" src="http://placehold.it/320x240?text=Slide%204">
  <img class="item" src="http://placehold.it/320x240?text=Slide%205">
  <img class="item" src="http://placehold.it/320x240?text=Slide%206">
  <img class="item" src="http://placehold.it/320x240?text=Slide%207">
</div>

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

//CSS______________
.猫头鹰转盘{
变换：旋转（90度）；
宽度：270px；
边缘顶部：100px；
} 
.项目{
变换：旋转（-90度）；
}
.猫头鹰转盘.猫头鹰导航{
显示器：flex；
证明内容：之间的空间；
位置：绝对位置；
宽度：100%；
顶部：calc（50%-33px）；
}
div.owl-carousel.owl-nav.owl-prev，div.owl-carousel.owl-nav.owl-next{
字体大小：36px；
顶部：未设置；
底部：15px；
}
/*JS____________*/
$（文档）.ready（函数（）{
$（“.owl carousel”）.owl carousel({
项目：3，
循环：false，
mouseDrag:错，
触摸拖动：错误，
pullDrag:false，
倒带：对，
自动播放：对，
保证金：0，
导航：对
});
});

使用代码笔检查此选项：

---

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

仅适用于方形图像或方形元素 下面是启用鼠标的示例

">
">
">
/*CSS*/
.包装纸{
高度：300px；
宽度：300px；
}
.猫头鹰垂直旋转木马{
变换：旋转3d（0,0,190度）；
}
.猫头鹰垂直旋转木马.项目{
变换：旋转3d（0,0,1，-90度）；
}
//JS
$（函数（）{
$（'.owl carousel'）。owl carousel({
项目：1，
循环：false，
导航：错，
保证金：0
});
//下面的代码支持垂直拖放。不幸的是，我无法禁用水平拖放，所以它将保持活动状态，但我们现在已经有了=D的东西
$（'.owl carousel'）。数据（'owl.carousel'）。差异=函数（第一，第二）{
返回{
x:first.x-second.x+（first.y-second.y），
第一，第二，第二
};
};
});

抱歉，伙计们，垂直幻灯片不会很快出现。我只是不想浪费代码空间去做一些我永远不会使用的事情。而且Owl2已经很大了。--Owl的创建者--如果你想要一些轻量级的东西，请使用不同的幻灯片或此幻灯片（这不是OP要求的。CodePen使用animate.css，我发现此链接对于进一步的信息很有用：

<div class="owl-carousel owl-theme">
  <img class="item" src="http://placehold.it/320x240?text=Slide%200">
  <img class="item" src="http://placehold.it/320x240?text=Slide%201">
  <img class="item" src="http://placehold.it/320x240?text=Slide%202">
  <img class="item" src="http://placehold.it/320x240?text=Slide%203">
  <img class="item" src="http://placehold.it/320x240?text=Slide%204">
  <img class="item" src="http://placehold.it/320x240?text=Slide%205">
  <img class="item" src="http://placehold.it/320x240?text=Slide%206">
  <img class="item" src="http://placehold.it/320x240?text=Slide%207">
</div>

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

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

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