How might I add padding / margin to the left of the first slide and right of last slide?

[guybowden]

I have a full-screen-width slider instance working well - however I'd like to add some spacing before the first slide and after the last slide such that there is an initial margin between the LHS of the screen (swiper container) but when I slide left, the slide goes to the full edge. Similarly on the RHS - I want my slides to come in from the screen edge, but stop with some margin - so the last slide is 20px in-board of the screen edge.

I've managed to get the LHS working by adding in a wrapper-start element of the required width. However the wrapper-end element will only appear on the RHS of the last slide when "overscrolling" - wrapper-start seems to push all my slides to the right by it's width - meaning the last slide is over-flowing the slider by the width of the start wrapper.

I am currently using a slidesPerView of 1.x - each slide is a matching width, with the height resizing according to the no. of slides per view - so if I try to add padding to the first + last slides then they are rendered out a bit smaller than the rest.

Any clues as to how I might achieve this?

Initial	Last Slide

^^ note margin on the left of the first slide, and right of the last slide.

[Arhell]

Try first-child and last-child in css

[guybowden]

Thanks for the tip - nothing "built in" that I've missed then I guess. We have taken a slightly different direction on this now though by adding the margin/padding within each individual slide (with bigger left padding for the first instance, and bigger right padding for the last instance)

…

On Tue, 25 Jan 2022 at 21:46, Ihor Sychevskyi ***@***.***> wrote: Try first-child and last-child in css — Reply to this email directly, view it on GitHub <#5388 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABCKU3KBH4ED34R6TMLIYLUX4DYZANCNFSM5MZJTZ3A> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Guy Bowden +33679309937

[ayoubkhan558]

I have used: first-child to add margin from the left side
Here is the codepen:
https://codepen.io/ayoubkhan558/pen/YzagKvB?editors=1100

[mostafa-nematpour]

Look at the last element

[ayoubkhan558]

I have updated codepen, Now its working fine.

[smtlaissezfaire]

FYI Make sure you look at the JS in the codepen, it was hidden by default which was confusing to me.

Thanks @ayoubkhan558

[0ldCold]

I found a solution!!!
https://swiperjs.com/swiper-api
slidesOffsetAfter, slidesOffsetBefore

[ayoubkhan558]

I have update codepen :)

[byStrange]

thank you bro, u saved my day, it worked

[joebentaylor1995]

you cannot use both at the same time

[dnlaviv]

you can simply add paddings to the swiper div,
NOTE: it might not work unless you use the !important flag, depending on the order of css imports you have set up in your project,
I'm using tailwind and reactjs in this current project and have to use it.

.swiper {
  padding: 0 20px !important;
}

[Ezra-Siton-UIX]

This idea not working so well in all scenarios and swiper options.
It is better/easier to use Swiper API options slidesOffsetAfter, slidesOffsetBefore.

For other readers - Mega Useful (on mobile):

Easy idea to "get rid" from the website container padding-right, padding-left is to use extra wrapper with negative margin (Match website container right/left padding). Than the slider is perfectly aligned (By slidesOffsetAfter, slidesOffsetBefore`).

Works like magic :)