Skip to content

Fixes issues #7298 #7956 #6916 when slidesOffsetBefore & slidesOffsetAfter are combinated with centeredSlides, slidesPerView & loop#8038

Merged
nolimits4web merged 2 commits intonolimits4web:masterfrom
WesselKroos:fix/7298-SlidesPerView-doesnt-works-well-with-slidesOffsetBefore-slidesOffsetAfter
Sep 11, 2025
Merged

Fixes issues #7298 #7956 #6916 when slidesOffsetBefore & slidesOffsetAfter are combinated with centeredSlides, slidesPerView & loop#8038
nolimits4web merged 2 commits intonolimits4web:masterfrom
WesselKroos:fix/7298-SlidesPerView-doesnt-works-well-with-slidesOffsetBefore-slidesOffsetAfter

Conversation

@WesselKroos
Copy link
Copy Markdown
Contributor

@WesselKroos WesselKroos commented Jul 3, 2025

This PR fixes several issues when slidesOffsetBefore & slidesOffsetAfter are combined with other settings.
Like in #7298 , #7956 and #6916

Note that the offset's are required to display a fadeout-overlay without obscuring the first/last slides. A margin/padding on the scrollable element would not work in this case, because it would hide the slides behind the fadeout-overlay.

For all the below examples the base config contains:

slidesPerView: 2,
slidesOffsetBefore: 100,
slidesOffsetAfter: 200,

1. Less than 2 slides were visible within the fading offsets

Before PR:

current.mp4

After PR:

fix.mp4

2. With loop: true the previous slides in the loop was missing

Before PR:

current-with-loop.mp4

After PR:

fix-with-loop.mp4

3. With centeredSlides: true the current slide is not centered within the offsets

Before PR:

current-with-centered-slides.mp4

After PR:

fix-with-centered-slides.mp4

4. With centeredSlides: true, loop: true (all configuration options and bugs combined)

Before PR:

current-with-loop-and-centered-slides.mp4

After PR:

fix-with-loop-and-centered-slides.mp4

… slidesOffsetBefore & slidesOffsetAfter work in combination with centeredSlides, slidesPerView & loop
@WesselKroos WesselKroos changed the title Fixes #7298 #7956 #6916 bugs when slidesOffsetBefore & slidesOffsetAfter are combinated with centeredSlides, slidesPerView & loop Fixes issues #7298 #7956 #6916 when slidesOffsetBefore & slidesOffsetAfter are combinated with centeredSlides, slidesPerView & loop Jul 3, 2025
@nolimits4web
Copy link
Copy Markdown
Owner

t0ggles-create swiper

@t0ggles
Copy link
Copy Markdown

t0ggles Bot commented Sep 3, 2025

Task nolimits4web/SWIPER-169 was created

t0ggles task SWIPER-169

@t0ggles t0ggles Bot added the t0ggles Linked to the t0ggles task label Sep 3, 2025
@nolimits4web nolimits4web merged commit 74cc297 into nolimits4web:master Sep 11, 2025
3 checks passed
@t0ggles
Copy link
Copy Markdown

t0ggles Bot commented Sep 11, 2025

Task nolimits4web/SWIPER-169 status changed to Done

@nolimits4web
Copy link
Copy Markdown
Owner

Merged, thank you!

@Artemsites
Copy link
Copy Markdown

Artemsites commented Nov 26, 2025

Hi everybody.

Screen Recording 2025-11-26 at 13 54 18

could you please tell me if this bug should have been resolved?
"2. With loop: true the previous slides in the loop was missing"
or is it not this bug?

@WesselKroos
Copy link
Copy Markdown
Contributor Author

WesselKroos commented Dec 2, 2025

could you please tell me if this bug should have been resolved? "2. With loop: true the previous slides in the loop was missing" or is it not this bug?

With this fix point 2 should be resolved. But make sure to set the values for slidesOffsetBefore and slidesOffsetAfter.
Because swiper does not know what the offsets are when you're using css paddings/margins instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

t0ggles Linked to the t0ggles task

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants