Carousel Image Offset
-
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 -
Dear @jacobtegel
this is not really possible by default. You probably need to play around and find a hack in CSS.Best!
Marius
-
This post is deleted!
-
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!
Jacobi’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.
-
-
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.
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?
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login