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.

Get the complete code here: https://github.com/codebubb/javascrip…

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

#javascript