Slider Module Distance Between Slides

Hello,

how is it possible to adjust the distance between the individual slides in a slider module?

When the module is rendered, each slide is assigned a margin right of 10px. If this value is overwritten via CSS, the width of the individual slides is no longer calculated correct and they are cut off. I want to define the spacing in rem.

Edit:
I just saw that you are using lightslider for the slider module. Would it be possible to override the slideMargin setting from within the tangible template? If it is possible, I do not want to adjust this value directly in the plugin files …

Hi Kaya,
I usually add padding inside the slide to create extra spacing without breaking the slide width calculation.
If you want your spacing to properly reflect rem, you can use calc to subtract the extra margin like so:

padding: 0 calc(1rem - 10px) 0;

We’ll definitely consider adding an option to override the slidemargin setting, thanks for the suggestion! :slight_smile:

1 Like

Hi Julia,
thank you for the tip about using CSS calc – I hadn’t thought of that.

I have now solved it as follows to align the last slide to the container again:

.tslide-outer  {
	margin-right: -.75rem;
}

.tslide-wrapper  {
	margin-right: .75rem;
}

.tangible-slider > div {
	padding: 0px calc(1.5rem - 10px) 0px 0px;
}
1 Like