- Overview
- Transcript
1.1 Welcome to the Course
Hello, and welcome to this Envato Tuts+ course. I’m Adi Purdila, and in this course we’ll create a full-screen slider with CSS and vanilla JavaScript.
Sliders are one of the most common UI patterns. They are very popular for websites that want to display a large amount of content without taking up too much space.
Now, there are hundreds of sliders available for download, but sometimes you just need something simple. If that’s the case, you can do it yourself, and this is what you’ll learn in this course.
In the first chapter, we’ll create a very simple CSS-only slider. And we’ll do this so you can learn the basic functionality and principle behind it.
Then, in the second chapter, we’ll add some advanced features. We’ll first simplify the markup by adding vanilla JavaScript, and then we’ll add an auto-run feature. We’ll also add some better styling to the whole thing.
With that said, I think it’s time we get rolling. Let’s start by writing the markup, and that’s coming up in the next lesson. See you there.
Related Links
1.Introduction
1.1Welcome to the Course01:27
2.Let’s Create a Simple Slider
2.1Writing the Markup07:11
2.2Writing the Basic CSS13:43
3.Let’s Add Some Advanced Functionality
3.1Simplifying the Markup With JavaScript13:16
3.2Adding an Automatic Slide Change12:35
3.3Adding Better Styling to the Slides08:31
3.4Styling the Pagination06:03
1.1 Welcome to the Course
Hello everyone and welcome to an Envato Tuts+ course. I'm Adi Purdila and in this course we'll create a full screen slider with CSS and Vanilla JavaScript. A slider is one of the most common UI patterns. This is very popular for websites that want to display a large amount of content without taking up too much space. In this example, you can see how I'm presented with three different products in the same area of the website. Now there are hundreds of sliders available for download. But sometimes you just need something simple and in that case, you can do it yourself, and this is exactly what you'll learn in this course. In the first chapter, we'll create a very simple CSS only slider. And we'll do this so you can learn the basic functionality and principle behind it. Then, in the second chapter, we'll add some advanced features. We'll first simplify the markup by adding Vanilla JavaScript. We'll add an autorun feature. And we'll also add some better styling to the whole thing. With that said, I think it's time we get rolling. We'll start by writing the markup. And that's coming up in the next lesson. So I'll see you there.
