Owlcarousel2: stagePadding on one side

[LekeFly]

Hi, is this possible?

[witrin]

Could you show us an example (e.g. screendesign) or showcase where this would make sense?

[LekeFly]

For fixed width items and on spesific screen sizes

Den 19. juni 2014 kl. 16:48 skrev Artus Kolanowski [email protected]:

Could you show us an example (e.g. screendesign) or showcase where this would make sense?

\
Reply to this email directly or view it on GitHub.

[witrin]

I don't get it really :/ ... A picture would be more meaningful.

[LekeFly]

http://cl.ly/image/1M440Z440F06
The gray boxes have a fixed width of 250px
only what is in the viewport(1px border box) should be visible.

Maybe this is possible with the current slider even? am i missing something?

[witrin]

Does it look like that all items have a fixed size over all screens? Or should have ...

[witrin]

In this case it should work when you just disable options.responsive = false I think.

[witrin]

Maybe I'm wrong and you have also to set auto width too and the fixed width for your items by css.

[witrin]

http://owlcarousel.owlgraphic.com/demos/autowidth.html

[nicetransition]

I had the same issue, I resolved it by adding a negative right: of my stagePadding's value on .owl-stage class .
For example, stagePadding: 20:

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

[gaja33]

even im facing same problem im using stage padding i was able to remove padding left but i want to remove padding from right either and black space on owl-stage class..

[nuflowx]

When setting stagePadding it does so on the left on the right. Is it possible to only set it for the right side?

[nuflowx]

You can just set padding-left: 0 !important in your CSS file

[fcubria]

So anyone know if this is possible?
This is the case where this has sense: showing the user that there are more items without using prev and next buttons.

Thanks in advance.

[hellorich]

@fcubria This is exactly the implementation i'm trying to create - did you ever figure out a means of doing this?

Edit: I've managed to implement this by setting items: 1.25, and using CSS to add spacing between items.

[tungmv7]

Thanks @kevinmack18 Save my life!

[jhill-amaze]

@nuflowx I prefer your approach over @kevinmack18 because it avoids the need to keep two values in sync (css and js) instead of just one. Thanks!

[sushantvishwas1990]

@fcubria yes it is possible you have to use the stagePadding with .owl-stage css property for example:

<script type="text/javascript"> $('.your-selector').owlCarousel({ items:1, stagePadding: 100, margin:10, loop:true, nav:false, dots:true, }); </script>

[Sv9t]

@sushantvishwas1990 if I have 2 carousel in my page and I wont only 1 carousel left: -100px? What I do?

[Sv9t]

@sushantvishwas1990 if I have 2 carousel in my page and I wont only 1 carousel left: -100px? What I do?

<script type="text/javascript"> $('.your-selector1').owlCarousel({ items:1, stagePadding: 100, margin:10, loop:true, nav:false, dots:true, }); $('.your-selector2').owlCarousel({ items:1,margin:10, loop:true, nav:false, dots:true, });</script>

[Ejilarasan]

On applying stagepadding with the left in negative works great. But, for the last item, it needs to be in the center while the loop: false. On loop: false, white space exists for the last item.

How can we fix this?

[ydang204]

this can be fix by using 1.5 items but it can not swipe on mobile
any solution for this?

[ArunAnthony]

StepPadding leaves blank space on right side when the number of items are completed after using right : -10 px important

[developersyed]

I had the same issue, I resolved it by adding a negative right: of my stagePadding's value on .owl-stage class .
For example, stagePadding: 20:

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

Greate, thank you. It worked for me, made my day

[Rahulv2492]

I had the same issue, I resolved it by adding a negative right: of my stagePadding's value on .owl-stage class .
For example, stagePadding: 20:

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

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

padding-left to 0 fixed my issue