Simple carousel

[Learning 16 Likes (Newbie)]

Hi guys,

 

I'm trying to do a simple carousel where slide 1 moves out and slide 2 moves in...

But I'm not sure what is the issue causing slide 2 not to appear.

When I check the details in browser, I notice that it did have a transform matrix, and when I uncheck the transform, it appears.

When I hide slide 1, the transform works. Hmm...

Here's the simplified test which get similar errors.

 

See the Pen qRMKKY by kelvinzhao (@kelvinzhao) on CodePen

[Dipscom 3,365 Likes (Superhero)]

Hello Learning,

 

You issue is in your CSS positioning. You need to set the slides to be absolute if you want them to occupy the same spot in the DOM, otherwise they will be stacked on top of each other.

[Learning 16 Likes (Newbie)]

Ah... Dumb me. Thanks for the solution!