Extending discussion for slider

Continuing the discussion from Intersection Observer API, counter and scope of a variable + Developing a slider:

Connecting Codepen → https://codepen.io/paulobrien/pen/OJOdaNy?editors=0110

Point of disccsuion:
For the slider designed by @PaulOB I have utlized the same JS in my current HTML requirement, but I have also addedd a gap property to conclude this look:

Slider Paul

  flex: 0 0 calc((100%) / var(--slides-across));
  transition: transform 0.5s;
  padding: 5px 10px;
  display: flex;
  gap: 15px;
  align-items: center;
  background-color: var(--color4);

Inclusion of gap is now creating a issue in slides it is creating a residual area on every one movement of a slide.

I have done a GIF to make my issue comprehensible.
Slider Paul
Available space distribution is handled from this place:

flex: 0 0 calc((100%) / var(--slides-across));

I could not figure out what and howw to make changes to get the things back to order as there were w/o flex gap property.

Hi @codeispoetry,

Paul may well spot the issue right away, but it might be helpful to post your last lorem-ipsum slider as a codepen. Just so that we can rule out any other factors behind the issue.

Do you want gap + padding? Couldn’t you keep it simple with 17.5px padding instead? A 7.5px padding to the main slider div as well, just to even it all up?

2 Likes

I purposely avoided using gap in my demo to avoid this specific issue. Instead I used padding on the inner element.

The gap property doesn’t work well with percentage widths as it adds to the width which means that all your calculations would need to include the gap offset as well in the css and js. Of course that’s not so easy because in my example the number of gaps depends on how many items are across the screen so you would need to do it multiple times in each media query and indeed in the js.

It is therefore much simpler to simply pad the inner element instead to increase the space. You should be able to do exactly what you want with using padding and not interfere with the calculations at all.:slight_smile:

As an example here’s a simple demo showing the GAP problem and a solution for simple cases.

The 1rem gap is offset using calc(). It uses .5rem because there are 2 panels of 50%.

flex-basis: calc(50% - 0.5rem);

I still advocate using padding on the inner element where possible.

1 Like

I was looking for some gap between the recurring units/slides →

There’s a gap between slides in my example. What’s the difference? You’d just use an inner element for the background color if needed or use a white border instead. Plenty of ways to do this without using gap :slight_smile:

2 Likes

Sir, In your latest codepen where has this gone:

flex: 0 0 calc((100%) / var(--slides-across));

Just to help out,

The latest codepen appears to be a demo Paul put together to illustrate the complication gap introduces — this is separate to the original code.

flex-basis: calc(50% - 0.5rem);  /* remove this to test */

The following line is still necessary for the actual slider code, as javascript makes calculations by accessing the css variable --slide-across.

flex: 0 0 calc((100%) / var(--slides-across));
2 Likes

To reiterate again the problem with using the gap property is twofold.

Firstly as shown in that last demo we can’t simply get two items across by having two items of 50% because the ‘gap’ in the middle also takes up room so you get 50% + 50 % + 1rem. 100% + 1 rem is too wide for any element and so overflows.

The issue is compounded if you want 4 items across because now you have three gaps in-between that you would need to offset.

The second issue that arises is that the js is sliding the panels across a screenful at a time and assuming they are in 100% units. However you would now need to slide taking into account how much more than 100% the gap property has made the panels.

I suggest that you avoid those extra headaches as you will have to take into account the different number of slides as the screen resizes.

Just use padding on that inner element instead as in my demo. If you don’t want the background color to cover the padding then you can try background-clip or indeed just nest an inner element.

2 Likes

Hello everyone, I have difficulty understanding these new codepens, and their purpose.
It may be easy for me to comprehend if you can suggest while I eliminate the gap property from here what new padding should I insert and where.

Put it exactly where I said :slight_smile:

Remove the gap and use this:

.hrecur{padding:7px;background-clip:content-box}

You can add some padding back in to make it look like your original with this.

.hrapper {
  gap: 0;
}
.hrecur {
  padding: 0 4px;
  background-clip: content-box;
}
.hrecur p:first-child {
  margin-left: 5px;
}
.hrecur p + p {
  padding: 7px 0;
}

e.g.

1 Like

I actually had tried this.

I have added one extra div to give a uniformity:

I have done this to only one unit on the live link shared above.

Initially, I thought that the introduction of new div container was the only way to accomplish a neat visibility?

My screenshot is uniform without extra container?

If you are using an extra container you will need to ensure that it is a nested flexbox in order to get equal heights.

Try adding 3 lines of text to one item to see if you have done it properly.

1 Like

Sir, after adding lot of content it comes like this:

(Currently only first unit has that extra div)

Live Updated Link

Ok that seems to do the trick :slight_smile:

Edit: Actually you’d need to check when all divs have the new extra container :;

1 Like

Sir, which way would you go that extra div or the one you suggested?

It depends on whether you want more elements in each section and then the extra div would make it easier.

Bear in mind my edit above.

1 Like