tiny-slider
tiny-slider copied to clipboard
Adding margin to slides throws off centering
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:
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
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)
I had the same problem. I solved it by creating a div inside the element so that the gutter doesn't padding the content.