huyhong / photo_carousel

Build a photo carousel

Instructions:

• Write this as a prototype with the intent of turning this into a proper component
• Code it the way you prefer, use libraries and techniques you're comfortable with
• Look up resources/docs as needed
• Do as much as you can in the time alloted, we don't expect you to complete all the specs
• Plan your time to work towards your strengths, it's okay to leave things sparse as long as it's commented as such

Specs:

• Left and right arrows to scroll through photos, should loop/cycle

• Photo should display 100% width of the container

• Container should grow vertically to accomodate the photo's aspect ratio

• Basic fade-in/out animations

• Photo sources (use whichever your prefer):

  • Static array of URLs: ['https://cdn.glitch.com/a606b2ac-adf4-4165-9f7a-6f7d2e3f1b4e%2FIMG_6580.jpg?1532627591767', 'https://cdn.glitch.com/a606b2ac-adf4-4165-9f7a-6f7d2e3f1b4e%2FDSC07233.jpg?1532627592128', 'https://cdn.glitch.com/a606b2ac-adf4-4165-9f7a-6f7d2e3f1b4e%2FIMG_5948.jpg?1532627592065', 'https://cdn.glitch.com/a606b2ac-adf4-4165-9f7a-6f7d2e3f1b4e%2FDSC06923.jpg?1532627592271', 'https://cdn.glitch.com/a606b2ac-adf4-4165-9f7a-6f7d2e3f1b4e%2FDSC06790.jpg?1532627592194']
  • Endpoint: https://organic-braid.glitch.me/photos

  Endpoint returns:

  [
    {
      "id":1,
      "url":"https://cdn.glitch.com/a606b2ac-adf4-4165-9f7a-6f7d2e3f1b4e%2FIMG_6580.jpg?1532627591767",
      "title":"Winning Feels Good",
      "username":"Fatima"
    },
    ...
  ]