Design comparison
Solution retrospective
This actually took me a lot longer than expected and it was far harder than anticipated as there are so many ways to tackle a carousel. Would appreciate feedback on my first one.
Community feedback
- @elaineleungPosted about 2 years ago
Great work, Shane! I think what you did here is fine as a basic slider. The next step up would be to make the slider more responsive when the width changes (as right now you pretty much have fixed sizes) and to add transition animation for the images, which would definitely be more challenging than just changing the image. Another thing to try is to add event listeners for the arrow keys so that they can control the changing of the content as well.
The only thing to note is that when I click the right button for the first time after loading, it doesn't seem to change content at all; it turns out that in your JS, for the order of the contents in the array, you have Tanya's content first and then John's second, whereas in the HTML, you have John hardcoded as the first one, so that's why when clicking the "next" button, I'd see John's content again since he is listed as second in the array. You can try either changing the order in the array or just have Tanya's content in the HTML so that it shows up first, just like in the design.
Marked as helpful1
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