In this tutorial, we’ll convert a set of images on the Nike.com website into an image slider.

0:00 Intro
00:24 Setup
00:56 Header section
02:39 Main layout
02:59 Product info section
04:33 Creating the JavaScript Slider
08:59 Adding Slide navigation to the slider
10:13 Pausing the timer on hover

If used carefully an image slider can be a good way to save screen space for important parts of your web site or app.

We’re going to take an example of the Nike.com product pages and convert the images for a set of shoes into a slider.

We’re building an image slider with JavaScript in this project but hopefully you’ll learn lots about building a landing page with HTML and CSS as well as we will first re-create the Nike.com product page.

Once we’ve got our landing page setup we’ll actually conver the section that displays the images into an image slider with JavaScript and you will see how easy this is to achieve.

In addition to creating the image slider on an automatic timer with the setInterval function we’ll also create navigation buttons so the user can move back and forth through the slides and as a final nice-to-have we will pause the slideshow on hover so that the user isn’t fighting against the automatic slider update and can browse the slides before resuming the timer when they move away from the slideshow.

#javascript #javascriptproject #javascriptbeginners

Channel Handle @codebubb