Adding margin to slides throws off centering

[labedzde]

Issue description:

I'm trying to add a slight margin between my slides so the light grey background appears between them. I have the centering mode on, however, once I had the left and right margins, the slide centering is off. I tried using the gutter setting, but that adds padding, and not margin.

Is there a way I can account for that? Or use a different setting?

Demo link/slider setting:

The issue is occurring on the second slider on this page.

staging site: http://geneva-trading.brightbrightgreat.com/careers/technology/

slider settings `// Text Slider

var slider = tns({ container: '.slider-container', slideBy: 'page', navPosition:'bottom', controls:'false', center:'true', loop:'true', mouseDrag:'true', swipeAngle: 'false', speed: '3000', items: 1, edgePadding:20, responsive: { 640: { items: 1, }, 700: { items:1 }, 900: { items: 1, edgePadding:200 } } });`

Tiny-slider version: 2.9.2 Browser name && version:
OS name && version:

[Oddward]

I'm facing a similar issue.

I think the real problem to note here is that the "gutter" option adds right padding instead of margin. From the docs I understood it to add margins but it doesn't, which is kinda annoying coz I added a background colour for each of my items (they're basically cards) & if there's an image header it has a padding next to it lol. When manually adding margins it throws off a bunch of things about the slider:

• positioning is off (?)
• "mouseDrag" doesn't seem to work (on PC)
• navigation is broken (the "prev next" buttons vanish & I can't navigate)

my settings for the slider are as follows:

var slider = tns({
        container: '.slider',
        slideBy: 1,
	autoWidth: true,
	loop: true,
	mouseDrag: true,
	swipeAngle: false,
});

Edit: P.S. I'm using Tailwind CSS for the site

[Oddward]

I decided to add another invisible wrapper around each item for now, and it's working fine like that (so the gutter acts like margins lol)

[JoseJARN]

I had the same problem. I solved it by creating a div inside the element so that the gutter doesn't padding the content.