Смещение совы-карусели в начале

Question

Я использую плагин owlCarousel, и я хочу, чтобы он имел смещение в начале и затем стал нормальным, когда карусель проходит над ним.

Примером этого является Kaw

Это моя конфигурация для карусели:

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

Answer 1

Я думаю, что вы ищете stagePadding

stagePadding: Number

Использование

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

Answer 2

Я не вижу ваш код, но вы можете использовать этот CSS или что-то подобное:

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

Answer 3

Они использовали функции transform property и translate3d().Вы также можете сместить контейнер div с помощью translateX(1200px, 0, 0)

Answer 4

Если вы хотите добиться того же, что и в демоверсии, установите смещение x translate3d на swiper-обертке:

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

Если вы хотите сохранить смещение при движении карусели, установитесмещение родительского контейнера:

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