Creating Netflix's Video Carousel with CSS Only

Creating Netflix's Video Carousel with CSS Only

Kevin Powell via YouTube Direct link

- Introduction

1 of 13

1 of 13

- Introduction

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Creating Netflix's Video Carousel with CSS Only

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - What we're starting with
  3. 3 - Making the general layout for the scroller
  4. 4 - Adding the arrows
  5. 5 - Adding the smooth scrolling
  6. 6 - Stop the arrows from sliding
  7. 7 - Styling the arrows
  8. 8 - Making the next/previous behavior work properly
  9. 9 - Getting the arrow to show when there is no target
  10. 10 - Fixing the arrows overflowing
  11. 11 - Showing that there is more content in the carousel
  12. 12 - The navigation indicators
  13. 13 - Fixing the button and indicators when nothing is targetted

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.