CODEWITHSUNDEEP
javascriptjqueryhtmlcssowl-carousel
Tim567
Tim567

Reputation: 805

Owl-carousel offset at begin

I am using the owlCarousel plugin and I want it to have an offset at the beginning and then go normal as the carousel is going over it.

An example of this is Kaw

This is my configuration for the carousel:

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

Upvotes: 0

Views: 2206

Answers (4)

Lars
Lars

Reputation: 380

If you want to achieve the same as in the demo, set the x-offset of translate3d on the swiper-wrapper:

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

If you want to keep the offset when the carousel moves, set offset on the parent container:

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

Upvotes: 0

Manoz
Manoz

Reputation: 6587

I think what you are looking for is stagePadding

stagePadding: Number

Usage 

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

Upvotes: 1

Lenny86
Lenny86

Reputation: 140

They used the transform property and translate3d() function. You could also offset the container div with translateX(1200px, 0, 0)

Upvotes: 0

Mohcin Bounouara
Mohcin Bounouara

Reputation: 623

I don't see your code but you can use this css, or something similar to that: 

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

Upvotes: 1

Related Questions