Home / Tutorials / Sliders

Sliders

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

Start Learning

Difficulty

Beginner

Course Duration

2 hrs 33 mins

Chapters

Exercises

Quizzes

Prerequisites

HTML

HTML is the starting point of essentially everything, hence it is a requirement.
CSS

CSS is needed for the styling of a slider.
JavaScript

JavaScript is essentially the very engine of a slider, powering its interactivity.

Course overview

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.

Learning outcomes

In what cases might we need a slider on a webpage, and how to approach the task of creating one.
Setting up a very elementary slider, leveraging such ideas as the BEM naming convention, foundational CSS styles, and very basic JavaScript logical constructs.
The different kinds of features that can be given to a slider — the likes of pagination, autoplay, progress bar, and so on.
Adding transition effects to sliders such as fade-in-fade-out, fade-out, slide, etc.
Adding keyboard interactivity to sliders to allow for quick navigation using the keyboard arrow keys.
Adding touch interactivity to sliders to allow users on touch-based devices to have a delightful experience while interacting with the slider.

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.
1. Touch Interactivity
  
  11 mins

FAQs

What if I get stuck somewhere in the course?

If you're having a hard time understanding a given concept in the course, feel free to reach out to me at bilal@codeguage.com, describing the issue you're facing. I'll try my level best to help you out.
Some important topics are missing from the course. Why is that so?

The courses on Codeguage are released while they are still under construction so that learners can get early previews. As I continuously work on adding more and more content to the courses, if a given topic isn't covered today, there's a high chance that it's already under way and will show up very soon. You can follow Codeguage on Twitter to be updated with all the latest content releases.
How can I ask any general questions related to the course's content?

Write to me at bilal@codeguage.com.

Prerequisites
Course overview
Learning outcomes
Table of contents
FAQs

Start Learning

It's different the 'Codeguage way'

Fundamentals-focused

When you have a robust foundation, with the fundamentals crystal-clear, your mind will intrinsically get that ability to handle any kind and level of complexity.

Comprehensive

With a comprehensive resource that covers literally every aspect of a given topic, your time is spent practicing the learnt concepts, not resolving confusions and basic questions.

Detailed

Coding is a detailed craft. Likewise, any resource trying to teach it in any way should be detailed as well, or else people will have to acquire those integral details from different places in a fragmented and haphazard manner.

Well-structured

Structure is vital to an intuitive learning experience of a given resource. Without structure, the right concepts get introduced at the wrong times, ultimately leading to confusion and breaking the desired flow of comprehension.