Skip to content
Submitted over 4 years ago

Simple Testimonials Slider With JS

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Coding bootcamp testimonials slider challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, everybody! 👋

This was my first challenge in which I actually had to write more than a few lines of JS. 😆 My solution works (as far as I know) but IDK about my JS... I'd love some feedback, of course, to see how I've done. 😊

I also added a subtle floating animation to the image just to keep things interesting!

Happy coding! 😄

EDIT: An issue I'm aware of is that there's this weird glitch where the background of the buttons on the page flickers or turns transparent when clicked on in Safari (because of a transform I added to their active state, I think). I added one or two properties that seem to take the flickering away, but I'm still unsure of how I can completely solve this glitch (other than, perhaps, getting rid of the transform completely).

Code

Please log in to post a comment

Log in

Community feedback

  • Arturo Simon•1,805
    @artimys

    Really cool solution. Animation is subtle and not in your face. It complements the page.

    In terms of JS using a boolean to switch between 2 slides is very simple and I don't think I would change it since this design only has 2 slides. It even creates the illusion that the slides start over when at the end. To scale more than 2 slides definitely switch from boolean to a counter variable method.

    My only tip would be to organize the slide data into js objects and reference them appropriately.

    let slide1 = { authorName: 'John Tarkpor', authorTitle: '...', imgPath: '...', review: '...' }
let slide2 = { authorName: 'Tanya Sinclair', authorTitle: '...', imgPath: '...', review: '...' }

slide1.authorName

    Keep on Javascripting!!

  • Anna Leigh•5,135
    @brasspetals

    Excellent job! 🙌 It seems whatever you did for the Safari glitch worked, because it looks just fine when I tested it. 👍 Wish I could help you with the JS, but I'm still learning that myself.

  • Sourabh Singh•165
    @6ixline

    Your solution is so perfect! Nice Job

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