Flix Carousel is a pure-CSS animated carousel modeled after Netflix's browse screen! It's less than 100 lines of source code and can be imported by CDN or by downloading this repository.
See Flix Carousel in action.
<div class="carousel">
<div class="carousel-row">
<div class="carousel-tile" style="background: #46B1C9;"></div>
<div class="carousel-tile" style="background: #84C0C6;"></div>
<div class="carousel-tile" style="background: #9FB7B9;"></div>
<div class="carousel-tile" style="background: #BCC1BA;"></div>
<div class="carousel-tile" style="background: #F2E2D2;"></div>
</div>
</div>
To install via CDN, add this to the bottom of your <head> tag. Hosted by RawGit.
<link href="https://cdn.rawgit.com/anthonykrivonos/flix-carousel/65556d56/src/carousel.css" rel="stylesheet">
To install manually, download this repository, add the contents to the root of your project, and link the source CSS at the bottom of your <head> tag.
<link href="src/carousel.css" rel="stylesheet">
End with an example of getting some data out of the system or using it for a little demo
Add the following to another CSS file linked to your project, or in a <style> tag within your HTML file.
:root {
--carousel-tile-spacing: ---px !important;
--carousel-tile-height: ---px !important;
--carousel-tile-width: ---px !important;
}
The growth factor is the rate at which a tile grows when hovered over.
<1: Shrink
1 : Normal
>1: Grow
:root {
--carousel-growth-factor: --- !important;
}
The fade opacity is the opacity of tiles that are not currently hovered, while another tile is currently hovered (value out of 1).
:root {
--carousel-fade-opacity: --- !important;
}
X:
1 for 1s transition
2 for 0.5s transition
3 for 0.3s transition
.carousel-tile {
transition: var(--carousel-transition-X) !important;
}
.carousel-row {
transition: var(--carousel-transition-X) !important;
}
- Pure-CSS Netflix Show Carousel - By Josh Hunt
- Anthony Krivonos - Initial work - Portfolio
This project is licensed under the MIT License - see the LICENSE.md file for details
- Josh Hunt
- Vicki Shao for all the support and flames! 🔥
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent