CODEWITHSUNDEEP
javascriptjqueryhtmlcss
propcode
propcode

Reputation: 309

Carousel padding on first item

I'm working with owl carousel using stage padding.

I'm using the carousel with loop:false. I'm trying to get the first item to be without padding on left and that after slide it keeps the same padding for both items on left and right.

So at page load it should be like this: enter image description here

And on slide: enter image description here

Using stage-padding gives padding both left and right. Giving space on first item as shown in my test.

The problem is that if I remove the padding-left (to get the first item attached on left without margin) I get this result on slide: enter image description here

Any idea how can I solve this?

This is my markup:

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

$('.owl-carousel').owlCarousel({
    stagePadding: 40,
    loop:false,
    margin:2,
    nav:false,
    items:2
})

Upvotes: 8

Views: 18019

Answers (4)

Sunil R.
Sunil R.

Reputation: 881

Add This css it will be work fine:

.owl-stage{padding-left:0px !important;}

Or if you want rtl:

.owl-stage{padding-right:0px !important;}

Upvotes: 4

Omid Moghadas
Omid Moghadas

Reputation: 347

you can this simple start in right use this code

.owl-stage {
    right: -32px;
 }

or start in left use this code simple

.owl-stage {
    left: -32px;
 }

you use tag style in your CSS on inline in your code

Upvotes: 1

Abdallah M Yassin
Abdallah M Yassin

Reputation: 87

u can add "left" just like this: $('.owl-carousel').owlCarousel({ stagePadding: 40, loop:false, margin:2, nav:false, items:2, left: -30 })

Upvotes: 1

G.L.P
G.L.P

Reputation: 7217

Its from inline style, try to find this line and remove padding-left like this:

<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); 
transition: all 0s ease 0s; width: 11132px; 
padding-left: 0px; padding-right: 40px;">.. </div>

Upvotes: 1

Related Questions