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:
And on slide:
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:
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
})
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:
And on slide:
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:
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
})
Share
Improve this question
edited Mar 13, 2021 at 15:15
Masoud Keshavarz
2,2449 gold badges40 silver badges49 bronze badges
asked Apr 29, 2015 at 12:46
propcodepropcode
3091 gold badge5 silver badges15 bronze badges
4 Answers
Reset to default 4Add This css it will be work fine:
.owl-stage{padding-left:0px !important;}
Or if you want rtl:
.owl-stage{padding-right:0px !important;}
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>
u can add "left" just like this:
$('.owl-carousel').owlCarousel({ stagePadding: 40, loop:false, margin:2, nav:false, items:2, left: -30 })
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