JavaScript Image Slider

Hosted Project

Image Slider Project

GitHub Source Files

https://github.com/JS-Beginners/image-slider-project

Project Objective

This JavaScript image slider project is pretty straight forward. Images are hard coded in an array and the objective is to use the slider to view each image.

JavaScript Used

• Arrays
• For Loop
• Looping through a node list
• Changing CSS Styling using JavaScript

My Personalize Summary

This is another JavaScript project that I coded completely by myself, including the HTML and CSS files.

I even went to pexel.com to find my own images for this project.

The instructor uses 7 images, I believe.

But, I figured four would do for me.

Once I figured out how to get the logic for two pictures to work, adding two more pictures was pretty straight-forward.

I used CSS flex-box to wire up my CSS.

New Things Learned or Refreshed

Although this is a JavaScript project site, the first thing I'll point out is that I used the relatively new CSS Flex-box to style my image slider.

CSS Flex-box made it super easy to center my arrows.

What used to take sophisticated styling via css-floats, is now so much easier.

But, I digress.

The first thing I had to refresh my memory on is how to loop through an array of nodes.

I created a node list of the arrows and I though I could just add an eventListener to the group of arrows in my node list.

But, I remembered (thankfully quickly upon seeing my error) that I needed to use the forEach method to loop through the node of elements.

I think that's the only thing that threw me for a loop in this project.

My code is significantly different than the JavaScript code used by instructor.

It just goes to show that there is no ONE right way to make a JavaScript application function.

Use the tools you best know how to use!

Time to Code

This project took me about 40 minutes to complete on my own, including the CSS and HTML files.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Image Slider App in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!