ARTICLE AD BOX
I'm trying to make a carousel in HTML/CSS by following exactly Coding2GO's video: https://www.youtube.com/watch?v=KD1Yo8a_Qis
In the video, 6 elements are spinning in the carousel.
Here is the code I reproduced: https://codepen.io/editor/Zibola/pen/019e229f-dce5-778e-a69a-ddfd2f41f2a1
I put it here too:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pen</title> </head> <body> <div class="carousel"> <div class="group"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> <div class="card">6</div> </div> <div aria-hidden class="group"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> <div class="card">6</div> </div> </div> <script src="./script.js"></script> </body> </html> .carousel { margin: 100px auto; width: 90%; border: 5px solid red; display: flex; overflow-x: auto; scrollbar-width: none; } .group { display: flex; align-items: center; justify-content: center; gap: 1em; animation: spin 5s infinite linear; padding-right: 1em; } .card { flex: 0 0 2em; height: 2em; padding: 1em; background: cornflowerblue; font-size: 3rem; border-radius: .2em; text-align: center; align-content: center; } @keyframes spin { from { translate: 0;} to { translate: -100%;} }As you can see, elements n° 5 et 6 of the first group are hidden by elements n°1 and 2 of the second one, so we actually only see the first 4 elements spinning. However, we should see all 6 of the elements, as in the video. (EDIT: the problem occurs in Firefox, but not in Chrome, apparently.)
What am I missing? I've rewritten almost exactly the code shown in the video, so I don't understand! I know it's due to the fact that the groups take less width than their children with my code, but why?
Thank you 🙏
