Skip to content
Submitted about 4 years ago

Simple Testimonials Slider With JS

ApplePieGiraffe•30,545
@ApplePieGiraffe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Coding bootcamp testimonials slider
  • HTML
  • CSS
  • JS
2junior

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
    @artimysPosted about 4 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!!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 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! 😊

    1
  • Anna Leigh•5,135
    @brasspetalsPosted about 4 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.

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @brasspetals

    Thanks for the feedback and the browser testing! 😆

    0
  • Sourabh Singh•165
    @6ixlinePosted about 4 years ago

    Your solution is so perfect! Nice Job

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @Devsourabh

    Thank you!

    1

Please log in to post a comment

Log in with GitHub

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