在OWL Carousel中滑动2项

我正在为我的滑块使用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

在当前版本的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 2

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

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

Answer 3

 scrollPerPage : true 

这可能有所帮助

Answer 4

 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 5

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

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

 Slide 2 items in OWL Carousel Check this Example 

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

Answer 7

对于下一步按钮，

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