A brief background
The web is full of amazing technologies evolving together to make possible what was back then considered to be impossible.
It has grown so much since the old days of the basic HTML markup, static site layouts and the elementary graphics, that it will take a whole library full of books to mention the complete development!
Today we all know what's the potential of the web. Games, software, music workstations, code editors, mail services, live chatting, and much more — all can be done pretty neatly on the web.
On the client side we have languages such HTML, CSS and JavaScript to create websites; fully-stacked frameworks such as Angular, React, Vue.js etc. that blend together into site designing and development techniques and plans.
Not only this but over the years, many new features and creations have sprung up in websites to add to the aesthetics and usability of a site. These features include basic things ranging from 'how to make a menu icon animate into a cross', to 'how to make a web page infinitely scrollable'.
Newer and newer features are being thought of and coded by web developers with every passing day.
One of the most popular of these creations, used even outside the web, is the idea of sliders.
What are sliders?
At the core, a slider represents an extremely simple idea:
Each slide holds some piece of content, and is largely controlled using JavaScript events.
A slider is sometimes also referred to as an image slider, slideshow, image gallery, carousel, and so on.
On sites such as news blogs where people want to see the top most trending news, or online shopping stores where people want to see the lastest promotions, sliders can be a handy way to display the underlying content.
Sliders compress down a lot of information into smaller and easily digestable chunks, and then the end users could easily navigate through them to view each part of the content one-by-one as they need it.
How to create a slider?
Talking about the ways to create a slider a given web page, developers have the options of number of different slider libraries out there to choose from and get their job done, with just a few initialisations.
Here are few of the most common ones:
- Swiper — swiperjs.com
- Flickity — flickity.metafizzy.co
- Splide — splidejs.com
The documentation for each library — i.e. how to setup a given slider, which functions to call, what configurations to use — can be found on its respective website.
Now the thing is that beginner developers usually learn how to use these libraries, and NOT the concepts behind them.
What this means is that if someday one gets down for some reason and a better one pops up they are just left with one choice if they want to keep track of the latest technologies — learn another library.
We are not trying to say that libraries shouldn't be used — they should definitely be used and serve to make the whole JavaScript ecosystem extremely mature and strong. However, this doesn't mean that one shouldn't ever try to dig into the internals of how certain libraries work.
So instead of memorising the functions of a slider library, why not learn how to make one, all by ourself?
Why not learn all the concepts involved in giving interactivity to sliders and implement them right away on our own machines?
If you feel the same, then this course is the guide for you to take.
Let's begin.
