How To Create Your Own Javascript Image Slider Tutorial (Step By Step)

Originally published here on YouTube.
(Give me a thumbs up and subscribe if you found this useful 🙏).

In this tutorial, you'll learn how to build a JavaScript Image Slider step by step.

Get the complete code here: https://github.com/codebubb/javascript-slider

To follow along with the tutorial run: git checkout setup to reset the project.

00:45 Project Setup
01:30 Adding Markup
03:37 Files Setup
04:12 JavaScript Class Setup
05:20 Basic Styles Setup
09:01 Creating the JavaScript Slider
18:21 Additional Styling
22:38 Adding Shortcuts
30:02 Autoplay Feature
31:32 Custom Configuration

— Follow Me —
Twitter: https://www.twitter.com/codebubb
YouTube: https://www.youtube.com/juniordevelopercentral
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So in this tutorial we'll be building a JavaScript image slider with buttons, autoplay and shortcuts to skip between slides.

Whilst there are lots of different available pre-built JavaScript sliders you can learn a lot by creating your own and in this JavaScript image slider tutorial you'll learn lots about JavaScript classes, binding and also some useful CSS techniques.

So whilst creating our HTML CSS JavaScript image slider we'll setup a JavaScript class which can be reused in other applications. This will be quite flexible as we can pass configuration details to the slider to allow it to fit in with an existing or new project.

We will enable our app to have a Javascript image slider left to right feel so that you can click buttons to navigate to previous and next slides. We will also configure shortcuts in the slider so that you can skip to a specific slide in the list of images.

As a final little feature of our JavaScript slider, we'll add auto play functionality so we have a Javascript image slider autoplay ability which again can be configured by the config data we pass in to the slide when we create it.

Check out some more Junior Developer Central Web development projects here: https://www.youtube.com/watch?v=e0e6m2mxJlU&list=PLpc_YvcwbxaTW88GAFDJ77DGihUr5H3Ha