Owlcarousel2: How to display the previous and next slider half on the screen in owl carousel?

[Naren-hybreeder]

I am using owl carousel 2 plugin (https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html). It's working perfectly. I just want to change the width of the slider so that half part of the previous slider and next slider will display on the screen.
I tried margin:300 in the script which is not good because it's not displaying my design output.

https://jsfiddle.net/Narendra2015/m3vwprdy/3/

[zwozwo]

hello, you have to set up your carousel with "center" and put the number of items on "two", like this:
$('#owl-wrapper').owlCarousel({
center: true,
items:2,
loop:true,
margin:10,
animateOut: 'slideInLeft',
animateIn: 'slideOutRight'
});

and use the carousel.css, of course :-)

[Naren-hybreeder]

Thanks for the reply zwozwo, Slider is working for me as well, There is no issue with the slider. I just want to set some CSS so that My slider can display the about expected output image. So when active slider on screen then left and right slider with white color overly will display.

[zwozwo]

okay, thats not what you asked first? And Why don't you actualize your fiddle? I still don't understand what you want to get as result?

[Naren-hybreeder]

@zwozwo, Sorry for the inconvenience, I haven't changed anything in the question. I already mentioned in the question that my slider is working. In fiddle, I tried some code from my side to get the actual output. I need an output which is in the image. My result is, I need a slider which is in the image.

[zwozwo]

I am so sorry, but I don't understand -may be 'cause english is not my native language.
Maybe someone else can help. I am pretty curious to see what you really meant :-)

[Naren-hybreeder]

@zwozwo , No problem sir, might be I haven't explained better. Let's explain in the details, In the above image. When Page load I am displaying the previous slide, current slide, next slide, and each slide have 50% width.

For example: I have 100% width of the screen so, I have to display 15%-15% for the previous and next slide and 50% for the current slide and 20% space between the previous and next slider.

If I am adding margin:300 in the script than I am getting the correct output http://prntscr.com/k7jqmf
but then how do I increase the width of the current slide becauese it's displaying like a box.

Hope you understand my issue.

[zwozwo]

Naren, I think i got it. Well, why dont you put the space between the silders into the div as a field of width: 15% or whatever. it works perfeclty an is responsive as well and you can style as you want. Here is an example - is that what you meant?
www.zwozwo.com/kunden/test/index.html

[primedime]

You can use stagPadding: to accomplish this.

stagePadding will allow a bit of the previous and next slides to appear on each side of your center slide.

You can check the docs here for how to use it: https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html

[zwozwo]

Yes primedime, but then it won't be responsive, cause you can't make the padding in percentage.
Nareen-hybreeder has tried already :-)

[Naren-hybreeder]

@primedime, Thanks for the reply, Yes, I already tried that but it's not giving me the output.

[zwozwo]

Naren-hybreeder, ich think the Solution is what I wrote in the Comment above primedime, have a look

[gzenakos]

try adding this css
.owl-stage { margin-left: -10%}

[phoenix98Glitch]

Can someone help me with the react bootstrap code of the same?