在 OWL Carousel 中滑动 2 个项目答案

【问题标题】：Slide 2 items in OWL Carousel在 OWL Carousel 中滑动 2 个项目
【发布时间】：2014-01-29 12:32:38
【问题描述】：

我正在为我的滑块使用OWL Carousel。

我要做的是在单击下一个上一个时滑动 2 个项目。

所以它在传输过程中滑动到每隔一个项目仍然显示第二个项目。

我尝试用 CSS 解决它，但没有成功。

这是我的基本设置

$("#owl-demo").owlCarousel({

  navigation : true, // Show next and prev buttons
  slideSpeed : 600,
  paginationSpeed : 400,
  singleItem:true,

  // "singleItem:true" is a shortcut for:
  // items : 2 
  // itemsDesktop : false,
  // itemsDesktopSmall : false,
  // itemsTablet: false,
  // itemsMobile : false

});

非常感谢任何帮助。

提前致谢。

【问题讨论】：

标签： javascript jquery css carousel owl-carousel

【解决方案1】：

不要更改插件代码，您只需要使用如下所述的 slideBy 选项初始化轮播。

//Initialize Plugin
$(".owl-carousel").owlCarousel(
  {
    slideBy: 4
  }
);

【讨论】：

使用 owl-carousel v2.0.0 非常适合我。此选项在响应式设置中也可用。

【解决方案2】：

scrollPerPage : true

这可能会有所帮助

【讨论】：

【解决方案3】：

jQuery(".view-id-frontpage .view-content").owlCarousel( {
  items: 2,
  itemsDesktop : [1000,2], // 2 items between 1000px and 901px
  itemsDesktopSmall : [900,2], // betweem 900px and 601px
  itemsTablet: [700,1], // 2 items between 600 and 480
  itemsMobile : [479,1] , // 1 item between 479 and 0
  navigation: true,
  lazyLoad: true,
  pagination: false,
  scrollPerPage : true
});

这对我有帮助。

【讨论】：

【解决方案4】：

在当前版本的 Owl Carousel (1.3.2) 中，找到“owl.carousel.js”文件并滚动到第 558 行。该行将显示：

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

将最后一个数字更改为“2”，使其显示为：

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

保存文件，这将使滑块移动两个项目。

【讨论】：

更新插件不是个好主意。还有其他方法可以更新。猫头鹰轮播版本 1.3.3

【解决方案5】：

Slide 2 items in OWL Carousel

Check this Example

http://jsfiddle.net/k0nn7yw5/107/

【讨论】：

请解释一下。

【解决方案6】：

您可以轻松添加

slideBy: 2

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

【讨论】：

【解决方案7】：

以上答案很有帮助，但并不完整。

替换owl.carousel.js中的第558行：

base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

将 owl.carousel.js 中的第 559 行替换为：

if (base.currentItem > base.maximumItem + (base.options.scrollPerPage === true ? (base.options.items - 1) : 0)) {

当您单击下一步时，这将使轮播滚动 2，但您仍然需要考虑用户单击上一个按钮时的情况。以下将做到这一点

将 owl.carousel.js 中的第 581 行替换为：

base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;

现在您需要在轮播中考虑奇数个项目，以便它会一直点击每个项目。

在第582行直接在上一步代码下面添加这段代码：

if (base.currentItem === -1) base.currentItem = 0;

希望对你有所帮助。

【讨论】：

【解决方案8】：

对于下一步按钮，

//base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem += base.options.scrollPerPage === true ? base.options.items : 2;

对于上一个按钮，

//base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 1;
To
base.currentItem -= base.options.scrollPerPage === true ? base.options.items : 2;

【讨论】：