一次创建 2 个项目的垂直猫头鹰滑块答案

【问题标题】：Create Vertical Owl slider with 2 itmes at a time一次创建 2 个项目的垂直猫头鹰滑块
【发布时间】：2018-04-13 10:14:26
【问题描述】：

我正在使用 Owl 轮播创建滑块我创建了一个水平滑块，但我需要一个 vertical 一个以及一次包含三个项目。

我搜索了但没有找到答案或相关帖子。

更新：

那次我使用了光滑的滑块，它可以按我的意愿工作。但在 owl 中，我无法做到这一点。

【问题讨论】：

我最终使用了光滑的滑块 github.com/kenwheeler/slick，将垂直滑块设置为 true，

标签： vertical-alignment owl-carousel vertical-scrolling

【解决方案1】：

在 css 中你应该添加：

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

在js中添加：

        $('.owl-carousel').owlCarousel({ 
           loop: true,
           items: 3,
           animateOut: 'slideOutUp',
           animateIn: 'slideInUp'
         });

【讨论】：

【解决方案2】：

这是一个带有垂直猫头鹰滑块的 CodePen：

https://codepen.io/thirdender/pen/aOYyGb

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

【讨论】：

先生，我一次需要 3 个数据。