Add a carousel to the homepage

  • Owner: Ancalagon
  • Difficulty: Easy
  • Type: Feature
  • Asigned to: Me
  • Date Created: 10-February-2017
  • Priority: High
  • Status: New
  • Resolution: Unresolved

Tags: #JavaScript #HTML #CSS

Description

The frontpage currently has some information about the first chapter of the Silmarillion, product now wants to display additional images and information on the page, and they decided to include a carousel.

You can see the live version here.

The additional images are included in the images folder provided, they should scroll in the order given their names. After the last image, display the first one again. The slides should change every 3 seconds.

The titles for the slides will be the following, Title : Subtitle

  1. Valaquenta : Account of the Valar and Maiar according to the lore of the Eldar
  2. Quenta Silmarillion : The History of the Silmarils
  3. Akallabêth : The Downfall of Númenor
  4. Of the Rings of Power and the Third Age : in which these tales come to their end

Attachments

Technical Notes

You could use any library or plugin needed, but the following would be preferred:

  • Avoid jQuery, use vanilla-js
  • Show bullets to know the current slide
  • Show arrows to change the slide, back and forth
  • An ideal solution will require no more JS code if more slides are added
  • Should work in any size, responsive
  • Change any part of the markup or CSS as you deem necesary.

When you're done, push to your repo and submit your answer.

Source:

Procedure:

Requirements

To solve this, you must have the following:

  • Github account
  • Basic understanding of Github
  • Basic knowledge of git
  • Basic understanding of HTML/CSS
  • Basic understanding of JavaScript

Look at our help section for more information about this.

Coding

To create your answer follow this steps:

  1. Fork the repo to your account, or download the zip file
  2. Solve the ticket
  3. Commit your code
  4. Push your changes
  5. Publish your version in Github Pages or Firebase Hosting
  6. Submit your response

Troubleshooting | Help

If you have need clarification with the project, files, or description, open an issue on github.

For questions with the platform, email us at [email protected]

For help with github or coding, consult our Learning and Resources page, where you will find information and links to tutorials and other content.