在OWL Carousel中滑动2项

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;

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