我正在为我的滑块使用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
});
非常感谢任何帮助。
提前致谢。
不要更改插件代码，您只需要使用如下所述的 slideBy 选项初始化轮播。
//Initialize Plugin
$(".owl-carousel").owlCarousel(
{
slideBy: 4
}
);
scrollPerPage : true
这可能会有所帮助
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
});
这对我有帮助。
在当前版本的 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;
保存文件，这应该使滑块移动两个项目。
Slide 2 items in OWL Carousel
Check this Example
上述答案很有帮助，但并不完整。
替换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;
我希望这会有所帮助。
对于下一步按钮，
//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;