Question

我正在使用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

}）;

任何帮助都非常感激。

提前致谢。

Answer 1

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

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

Answer 2

scrollPerPage : true

这可能会有所帮助

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

这帮助了我。

Answer 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;

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

Answer 5

Slide 2 items in OWL Carousel

Check this Example

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

Answer 6

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

替换 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;

我希望这有帮助。

Answer 7

您可以轻松添加

slideBy: 2

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

Answer 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;

在OWL Carousel中滑动2项

8 个答案: