3D Carousel with more items

[marcelo2605]

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

[Rodrigo]

Hi,

 

This seems to work:

.img {
  width: 50%;
}

 

Happy Tweening!

[marcelo2605]

Thanks for the reply @Rodrigo. Actually, what I need is keep the images with the same width of the first example.

[akapowl]

 

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

 

[marcelo2605]

Thanks for the explanation @akapowl. Really helpful.

[GreenSock]

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).