Carousel Image Offset

[jacobtegel]

Hey there,

i’m working on a site where i want the focused image of a carousel to align with the site title (8.3% offset from the left). I have tried to find out where to put the code but i couldn’t get it to work.
But what i did notice is that somehow the position of the image will be calculated & offset accordingly, the translate3d seems to change based on the selected image.

<div class=".swiper-wrapper" style="transition-duration:0ms; transform: translate3d(-4865.4px, 0px, 0px);">

Would it be possible to have a short piece of code where i could alter the offset in such a manner, that the focused image wouldn’t have it’s left border at 0%, but at 8.3%?

Thank you in advamce!
Jacob

[mariusjopen]

Dear @jacobtegel
this is not really possible by default. You probably need to play around and find a hack in CSS.

Best!

Marius

[jacobtegel]

This post is deleted!

[jacobtegel]

i’m working on a site where i want the focused image of a carousel to align with the site title (8.3% offset from the left). I have tried to find out where to put the code but i couldn’t get it to work.
But what i did notice is that somehow the position of the image will be calculated & offset accordingly, the translate3d seems to change based on the selected image.

<div class=".swiper-wrapper" style="transition-duration:0ms; transform: translate3d(-4865.4px, 0px, 0px);">

Would it be possible to have a short piece of code where i could alter the offset in such a manner, that the focused image wouldn’t have it’s left border at 0%, but at 8.3%?

So if somebody should come to this thread in search for an answer: you can offset the »focused« image using this code:

.lay-carousel-slide {
transform:translateX(8.3vw);
}

The 8.3vw (viewport-width) gives me the desired effect. Don’t use a percentage since it will be calculated based on the slide itself. Also don’t offset the swiper wrapper itself, since it will break the carousel and it won’t function anymore.

[mariusjopen]

Dear @jacobtegel
ah wow! Thank you for sharing!

Best!

Marius

[Remco van Dun]

@jacobtegel

Works nicely, but there is not an equal distance on the right side of the carousel, cropping the picture by 8.3vw since you moved the whole thing. Is there a way to add the same 'padding' to the right you think?