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

Posted 2023-03-05

【中文标题】一次创建 2 个项目的垂直猫头鹰滑块

【英文标题】：Create Vertical Owl slider with 2 itmes at a time

【发布时间】：2018-04-13 10:14:26

【问题描述】：

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

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

更新：

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

【问题讨论】：

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

【参考方案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 个数据。