Is there a way to adjust the spacing between slides in Swiper js using relative units such as 2rem?
The entire page is designed with relative units. All measurements are set in rem, which adjusts based on the viewport size for optimal adaptability.
For instance:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
font-size: calc(100vw / 1440 * 8);
}
.swiper-slide {
display:flex;
max-width: 33.33%
align-items: center;
justify-content: center;
background-color: green;
color:white;
font-size: 4rem; (equivalent to 32px)
padding: 2rem; (equivalent to 16px)
}
However, I encountered an issue with the space between the slides...
The documentation specifies that for spaceBetween: string | number, only a string value can be assigned via JavaScript.
Setting a right margin using CSS does not work and the documentation advises against it.
I tried adjusting both the margin and removing it using nth-child for the first and last slide - but this did not yield the expected results. The gap property on the wrapper also did not work.
Even attempting to reassign it in JavaScript through a variable did not produce the desired outcome.
I am seeking assistance. Here is the sandbox - https://codepen.io/divside/full/eYPKNxN The objective is to maintain a consistent distance of 2rem between slides
Any ideas... whether it's gap/margin/padding/ rem in JS or variables... all suggestions are welcome.