Home > Tutorials > Sliders

Sliders Tutorial

Break down content into different slides that can be swiped across using mouse, keyboard and touch gestures.

Start Learning

Things To Know

What is this course about?

Sliders, also known as JavaScript sliders, image sliders, or carousels are a taste of the modern web with which you can narrow down large chunks of information on a web page into more manageable, more serene, and more fancy designs of slides.

Sliders are quite common around the net - it is more than likely that you would've encountered them at some point in your explorations around the web. Even if for some reason you haven't come across sliders in web pages, you at least would've been using them already for a long while by now on your smartphone!

Yes sliders are also present in your smartphone's OS just at the home page where you swipe across thumbnails and they get navigated here and there.. This is what sliders are all about - content divided into pieces known as slides that flow in and flow out at user interactions to make indigestable information, digestable.

Benefits of learning

So what do sliders are to offer you?

  1. Learning sliders will teach you how to actually implement stuff learnt in CSS and JavaScript. You will not only learn how to implement stuff but also how to think on what to use to accomplish a given task.
  2. Learning sliders will furthermore teach you all the insights to the workings of simple to complex sliders around the web. You will for instance understand how touch-based interactivity is given to sliders using JavaScript touch listeners, event objects and a bit of math.
  3. You'll also learn how to combine CSS skills to give near-stunning effects to sliders such as fade-in, fade-out, slide and so on. Transitional effects aren't just at the usage of sliders, but in literally a ton of other places as well so knowing them will make you able to better understand all those instances.

Why should I take this course?

When there are so many regexp courses out there why shall I consider this course? Here's why:

  1. Firstly, because this slider's course is the first-of-its-type course, with a well laid out structure, growing perfectly and gradually in gradient of its learning curve.
  2. Secondly, because after learning all this you'll be able to create your very first JavaScript library. Code conventions, best practices, efficiency meaures, debugging; all these principles are required in developing a library and surprisingly are all present in this course.

Course Statistics

20% Difficulty Level
3 Units
14 Chapters
100+ Code Examples
3 Quizzes

Course Overview

  • Foundation

    In this unit we shall start off by laying out an HTML and CSS structure of our slider and then progressively build on it by adding newer and newer features. We will consider a very basic slider with its logic going into JavaScript. After that we will finally take a look at some of the most frequent features given to sliders.

  • Effects

    In this unit we will solely discover the different types of effects we can give to a slider and specifically how to write code to get them into action. We'll bring on the idea of CSS transitions and animations to help us in developing fluid motions for our slider.

  • Misc

    In this unit we will discover the slightly more complicated part to sliders i.e of adding touch interactivity. We'll start off with considering very basic touch events, and then improve on them to include the swiping effect into our slider as well. We'll also see how to bind key events to the slider to allow quick interactivity for keyboard users.

Prerequisites

Before taking this course you should know the following:

  1. HTML
  2. CSS - Start Learning
  3. JavaScript - Start Learning

Quizzes

Check out the following quizzes in this course:

  1. Foundation - Pagination Quiz
  2. Foundation - Autoplay Quiz
  3. Foundation - Progress Bar Quiz

Why our courses?

Start Learning

From the Blog