Skip to content
Submitted over 4 years ago

Responsive coding bootcamp testimonials slider using HTML - CSS - JS

Giovanni•40
@Giovnni
A solution to the Coding bootcamp testimonials slider challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I can't figure out how to get ride of the text layering. I used the text ID to gave it a hidden visibility or a none display but after that it appears that the text ID properties override the new properties and it don't show up at all

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Sankara Gomathy M•455
    @sankaragomathym

    Hey Giovanni! I guess you have complicated your code. Just keep it simple. Have 2 containers A and B (each inclusive of image, text, name). On initial load, let B have 'display:none'. In JS all you have to do is toggle displays of A and B based on ID or whatever selector you use.

    The above is fine since there are only 2 testimonials. But when we have to deal with more number, instead of having containers for each testimonial, we can simply have one container in HTML and the content stored in JSON format. When slider is clicked, just fill in the corresponding content using JS.

    Hope this helps.. You can refer my code if needed.

Join 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