marcelo2605 Posted July 18, 2023 Share Posted July 18, 2023 I'm creating a 3D Carousel based on See the Pen PoWGpWj by creativeocean (@creativeocean) on CodePen . The only difference is that my carousel has more images (20 instead of 10). The problem is: now, the images don't have the same width of the reference and the space between them is gone. Is there a way to increase the width of the carousel? See the Pen mdQLXRo?editors=0110 by marcelo2605 (@marcelo2605) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted July 18, 2023 Share Posted July 18, 2023 Hi, This seems to work: .img { width: 50%; } Happy Tweening! Link to comment Share on other sites More sharing options...
marcelo2605 Posted July 19, 2023 Author Share Posted July 19, 2023 Thanks for the reply @Rodrigo. Actually, what I need is keep the images with the same width of the first example. Link to comment Share on other sites More sharing options...
Solution akapowl Posted July 19, 2023 Solution Share Posted July 19, 2023 Hello Marcelo. You will need to tweak the initial setup then. What the codepen example does is create an imaginary circle of images. See the Pen eYQrobJ by akapowl (@akapowl) on CodePen Think of it this way; A circle only has so much space available on its circumference. If you want to have more elements than the example you posted has but they should have the same width, you will need to increase the imaginary circle's size for them to fit onto it to begin with; unfortunatelly there is no easy setting like circle-size: bigger here; it is all in the setup related to the rotationY, z and transformOrigin-z values of the images; like anyone else who didn't write that example you posted and would have to dive into the logic of it first; you will need to tinker around with those values (and maybe more outside of those) until you find a desired result (in the end it will all come down to math for matching the values when tweaking them, too). You already doubled the amount of elements to show and halved the rotateY value for each image in relation to that - so far so good. I now also doubled the z value and the transformOrigin's z value to follow that logic, and it then gives a circle with a bigger radius apparently... See the Pen xxQjNOX by akapowl (@akapowl) on CodePen ...which should already come a lot closer to what you wanted to achieve. Sidenote: Logically, since the circle now is way wider; of course it won't have the same visual 'effect' as the smaller circle has. I hope that will help get a better understanding in some way. See the Pen OJaZYWY by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
marcelo2605 Posted July 19, 2023 Author Share Posted July 19, 2023 Thanks for the explanation @akapowl. Really helpful. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 19, 2023 Share Posted July 19, 2023 By the way, this is something I whipped up in another thread: See the Pen RwLepdQ by GreenSock (@GreenSock) on CodePen (In case it's helpful...but maybe it isn't). 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now