Odin Project - Image Carousel in Javascript

Project: Creating an Image Carousel/Slider in Javascript

We’ll take a break from games to build something that you’ll probably create in the real world at some point – a simple image carousel / slider which cycles through some preloaded images. See the one on eriktrautman.com for the general idea. jssor.com also has one, though yours will not contain any of those fancy transitions.

Though it may seem a bit simple initially, this project will probably make you scratch your head a bit and that’s good – it’s a very relevant real-world example of a feature you might be asked to build and you’ll have to think your way through to the solution.

Your Task

Create a simple image carousel site. It should contain arrows on each side to advance the image forward or backwards. It should automatically move forward every 5 seconds. It should contain the little navigation circles at the bottom that indicate which slide you are on (and they should be click-able to advance to that particular slide).

Don’t spend too much time worrying about getting your images to display at the correct size – it’s more important to get the slider sliding.

1. Set up a Github Repo for this project. Follow the instructions atop the Google Homepage project if you need help.
2. Set up a blank HTML document
3. Think about how you would set up the different elements within the site. What objects and functions will you need? A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.
4. Build the static HTML for the carousel.
5. Set up a very wide div which will contain the individual “slides” of each image. By appropriately positioning that div inside a container div (which acts like a picture frame), you can choose which slide is visible at any given time.
6. Once you have the slider positioned properly, build functions for “next” and “previous” which will advance to the next or previous slide accordingly. Make the transitions smooth using simple effects.
7. Set up arrow buttons which activate those functions and play with cycling through the images.
8. Add in some navigation dots at the bottom of the slides. Make a horizontal series of empty circles with CSS immediately below the slideshow. Each circle represents a slide, so whenever a new slide is activated, its corresponding circle gets filled in so you can tell where in the show you are. Make each circle link to that particular slide, so you can click on the circle and it will jump to that slide.
9. Add a timeout which advances the slides every 5 seconds.
10. Play around with your slideshow!
11. Push the project to Github and add the link to your solution below.

Advanced Additions (Optional)

1. When you hover on the “next” or “previous” arrows, it should actually pop up a little tiny picture preview of the next slide’s picture.
2. Make the slides continuous. Right now, when you click “previous” at the first slide, it probably jumps right to the last slide in a very jerky fashion. Make it so that if you click “previous” when you’re at the first slide, it will go left to the last slide in your collection as if it was positioned immediately to the left of the first slide. You should be able to continue cycling to the left by clicking the “previous” button as many times as you like and the transition will always look the same.

I think it turned out nice. Didnt add the previews because I wanted to keep it simple. Very easy to integrate, just add the img in the html page and change the variables (size, nb of photos, …) in the script.

High fives for everyone.

Here’s code, and the result.