Skip to content
Submitted over 3 years ago

Mobile first, fading effect using css and Vanila JavaScript

Agata Liberska•3,995
@AgataLiberska
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

Hi everyone, I would love some feedback on the following:

  • I tried my best to make the images resize well for all screen sizes, so if anything looks off, please could you point it out to me
  • Is there any way I could improve my code? I tried to make it as clean as I could, but I bet there's room for improvement.
  • I used the new readme template - is there anything I should add or is there anything that is not necessary, looks a bit off, unprofessional?

And obviously, any other feedback is welcome!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hey, Agata Liberska! 👋

    Good job on this challenge! 👍 I like the animation of the image slider and the extra slides you added! 😀

    Something that might be worth considering is preloading the images in the slider so that there is no delay between when a new slide is shown for the first time and the image of that slide appears. I noticed you used CSS background images for the image slider, though, so while I haven't tried preloading background images in CSS yet, I think this StackOverflow page might help. 🙂

    Otherwise, the rest of your solution and your code looks good (including the README)! 👏

    Keep coding (and happy coding, too)! 😁

    1
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @ApplePieGiraffe Thank you so much, I was wondering how to get rid of that, but had no idea how to even describe the problem. Going to try it out now!

    1
  • Michal•665
    @mbart13Posted over 3 years ago

    this is awesome solution, and it was benchmark for me, only I did it with flexbox ;)

    there is a neat trick to get next and previous index in carousel with one line of code

    next: index = (currentIndex + 1) % testimonials.length

    prev index = (currentIndex - 1 + testimonials.length) % testimonials.length

    0

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