Slider

CSS
Free Play
Medium

Objective

Slider

Make an animated slider

The Figma design is here

Requirements

  1. Turn this Figma design into a carousel slider

    1. Only the image should slide, the rest of the content can update instantly

  2. It should have 3 slides

  3. Build it as you would a commercial project, using any libraries or technology you choose

Evaluation Criteria

If I gave you this test, here's what I'd be looking for:

This is a fairly common example of a take-home tech test, you've been given a design and free play on the technologies to build it.

If you do receive a test like this, timebox it to 3-4 hours maximum, it's easy to get carried away and spend too long making it perfect.

It'll be common to receive a follow-up question at an interview along the lines of "what else would you do if you had more time?" Be sure to have an answer ready.

The basics

  1. Design accuracy

    1. You might not get it pixel-perfect, but it should be close

  2. Transitions

    1. The transition between images should be smooth and seamless

    2. The image should slide in easily, without any jumping as the image loads, especially if it's a larger file

  3. Browser compatibility

    1. It doesn't need to work on Internet Explorer but make sure you've got Chrome & Safari at the very least

  4. Accessibility

    1. Make sure you've got alternate text for the images

    2. Keyboard navigation would be nice

  5. Documentation

    1. As a takehome, you'll probably submit this via email or upload. It's good to add a README.md explaining your approach and how to run it.

Nice to have, if you have the time:

  1. Some unit tests

  2. Responsiveness (though mobile designs aren't provided)

Click to reveal