Align last slide to the left when slide with is smaller the slider width #4780
Replies: 9 comments
-
We are facing the same issue at the moment. Totally support this feature request! |
Beta Was this translation helpful? Give feedback.
-
I have the same problem and adding an offset create a ghost pagination dot which is not ideal. |
Beta Was this translation helpful? Give feedback.
-
I get a lot of request from clients who want the pagination to reflect the number of slides, not the number of swipes needed to see the last slide, and they don't mind the empty space on the right after the last slide. On Flickity you can achieve this behavior with the cellAlign option. |
Beta Was this translation helpful? Give feedback.
-
At the moment, the most flexible solution I found is to add a margin-right to the last slide equal to 100% minus the width of the last slide itself. Something like: .swiper-slide {
--slide-width: 25%;
width: var(--slide-width);
}
.swiper-slide:last-child {
margin-right: calc(100% - var(--slide-width));
} |
Beta Was this translation helpful? Give feedback.
-
Any news on this ? @nolimits4web |
Beta Was this translation helpful? Give feedback.
-
+1 I really would like this. |
Beta Was this translation helpful? Give feedback.
-
any new about this ? Thank you |
Beta Was this translation helpful? Give feedback.
-
I found this : https://codepen.io/YUUMU/pen/KKMaxOZ |
Beta Was this translation helpful? Give feedback.
-
Clear and concise description of the problem
Currently, if your slide width is smaller than the swiper width, when you get to the last slide, the right edge of the slide will be stuck to the right edge of the swiper.

Suggested solution
When you reach the last slide, there should be an option so that the left edge of the last slide is aligned with the left edge of the swiper.

Alternative
No response
Additional context
No response
Validations
Would you like to open a PR for this feature?
Beta Was this translation helpful? Give feedback.
All reactions