Coding Bootcamp Testimonials Slider with HTML, CSS and JS
Design comparison
Solution retrospective
Hi there! Thanks for viewing my solution :)
I have a few questions:
1 - Is it possible to create an infinite scroll with only 2 images? the resources I found were at least 3 images for the slider.
2 - Instead of using display none, what can I do to create a transition animation for the text to appear smoothly after switching to the next picture?
3 - How may I improve my code?
Thanks for commenting!
Community feedback
- @YannotronPosted over 3 years ago
also,
I haven't checked original challenge but on mobile version, your padding sends the containers off scrre. Try to set your padding to 0 in .body, and padding: 2rem in .carousel-background
0 - @YannotronPosted over 3 years ago
Q1: interesting, I'll have a look.
Q2: Try adding z-index on that class and only transition to opacity 1 => transition : 0.3s opacity. Maybe you can avoid using display : none that way.
0 - @YannotronPosted over 3 years ago
Hi Melvin,
I am not sure I understand the first question but with regards to question number two, you can use css opacity : 0 and change it to 1 with a transition.
Yann
0@MelvinMelonGitPosted over 3 years agoHi @Yannotron
Thanks for your reply!
-
I read tutorials online and they used at least 3 different images to created the slider with infinite scroll, not sure how it can be done with only 2 images instead.
-
Currently the hidden content is stacked underneath the visible one. If i were to use opacity 0, it leaves a blank space there. So im not sure what can be done besides using display "none".
Regards, Melvin
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord