Owl-轮播开始时的偏移量

Question

我正在使用 owlCarousel 插件，我希望它在开始时有一个偏移量，然后在轮播经过它时恢复正常。

这方面的一个例子是 Kaw

这是我的轮播配置：

$(".owl-carousel.carousel-autoplay").owlCarousel({
    items: 4,
    autoPlay: 5000,
    pagination: false, 
    navigation: true,
    navigationText: false,
});

Answer 1

如果你想实现和demo一样的效果，在swiper-wrapper上设置translate3d的x-offset:

    .swiper-wrapper { transition-duration: 0ms; transform: translate3d({offset}px, 0px, 0px); }

如果想在轮播移动时保持偏移量，在父容器上设置偏移量：

.owl-carousel { margin-left: {offset}px; }

Answer 2

我没有看到你的代码，但你可以使用这个 css 或类似的东西：

.owl-stage-outer .owl-stage item:first-child {padding-left: 11%;}

Answer 3

他们使用了transform property和translate3d()函数。您还可以用 translateX(1200px, 0, 0)

偏移容器 div

Answer 4

我想你要找的是stagePadding

stagePadding: Number

用法

$(".owl-carousel.carousel-autoplay").owlCarousel({
    items: 4,
    autoPlay: 5000,
    pagination: false, 
    navigation: true,
    navigationText: false,
    stagePadding: 10 //padding in pixels
});

Owl-轮播开始时的偏移量

Owl-carousel offset at begin

html

javascript

css

jquery

owl-carousel