How to Create a Full-Screen Slider With CSS and Vanilla JavaScript

Adi PurdilaOct 19, 2020Lessons: 7Length: 1 hour

Next lesson playing in 5 seconds

Cancel

How to Create a Full-Screen Slider With CSS and Vanilla JavaScript

Welcome to the Course

01:27

A slider is a very popular UI pattern and is very useful for displaying large amounts of information without taking up too much space. While there are hundreds of sliders you can download, it’s actually really easy to create your own, and that's exactly what you’ll learn in this course.

In the first chapter, you’ll learn how to create a CSS-only full-screen slider, and in the second chapter you’ll add more advanced functionality to it with vanilla JavaScript. You’ll also learn how to add some nicer styling.

1.Introduction
1 lesson, 01:27

1.1
Welcome to the Course
01:27

2.Let’s Create a Simple Slider
2 lessons, 20:54

2.1
Writing the Markup
07:11

2.2
Writing the Basic CSS
13:43

3.Let’s Add Some Advanced Functionality
4 lessons, 40:25

3.1
Simplifying the Markup With JavaScript
13:16

3.2
Adding an Automatic Slide Change
12:35

3.3
Adding Better Styling to the Slides
08:31

3.4
Styling the Pagination
06:03

Adi Purdila

Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.

adipurdila

How to Create a Full-Screen Slider With CSS and Vanilla JavaScript

Next lesson playing in 5 seconds

How to Create a Full-Screen Slider With CSS and Vanilla JavaScript

Welcome to the Course

1.Introduction1 lesson, 01:27

1.1Welcome to the Course01:27

2.Let’s Create a Simple Slider2 lessons, 20:54

2.1Writing the Markup07:11

2.2Writing the Basic CSS13:43

3.Let’s Add Some Advanced Functionality4 lessons, 40:25

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.Introduction
1 lesson, 01:27

1.1
Welcome to the Course
01:27

2.Let’s Create a Simple Slider
2 lessons, 20:54

2.1
Writing the Markup
07:11

2.2
Writing the Basic CSS
13:43

3.Let’s Add Some Advanced Functionality
4 lessons, 40:25

3.1
Simplifying the Markup With JavaScript
13:16

3.2
Adding an Automatic Slide Change
12:35

3.3
Adding Better Styling to the Slides
08:31

3.4
Styling the Pagination
06:03