Submitted over 3 years ago

Simple Testimonials Slider With JS

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Preview site View code

This is a solution for...

Coding bootcamp testimonials slider

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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).

Community feedback

Arturo Simon• 1,785

@artimys

Posted over 3 years ago

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!!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@artimys

Thank you for your feedback!

I was wondering if I might somehow be able to use objects in case I was working on a project that involved more than simply two slides. Your tip helps a lot! 😊

Anna Leigh• 5,135

@brasspetals

Posted over 3 years ago

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.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@brasspetals

Thanks for the feedback and the browser testing! 😆

Sourabh Singh• 165

@6ixline

Posted over 3 years ago

Your solution is so perfect! Nice Job

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@Devsourabh

Thank you!

Please log in to post a comment

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