https://github.com/anthonykrivonos/flix-carousel
🎠Netflix-style carousel made in pure CSS!
https://github.com/anthonykrivonos/flix-carousel
animated carousel collection css library netflix
Last synced: about 1 month ago
JSON representation
🎠Netflix-style carousel made in pure CSS!
- Host: GitHub
- URL: https://github.com/anthonykrivonos/flix-carousel
- Owner: anthonykrivonos
- License: mit
- Created: 2018-09-16T16:51:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-17T04:13:17.000Z (almost 7 years ago)
- Last Synced: 2025-03-31T18:07:09.715Z (3 months ago)
- Topics: animated, carousel, collection, css, library, netflix
- Language: CSS
- Homepage:
- Size: 7.81 KB
- Stars: 32
- Watchers: 3
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Flix Carousel
*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.
```
```
## Getting Started
### Installing
To install via CDN, add this to the bottom of your `` tag. Hosted by [RawGit](https://rawgit.com/).
```
```
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 `` tag.
```
```
End with an example of getting some data out of the system or using it for a little demo
## Overwriting Default Styling
Add the following to another CSS file linked to your project, or in a `` tag within your HTML file.
### Changing Tile Spacing/Height/Width
```
:root {
--carousel-tile-spacing: ---px !important;
--carousel-tile-height: ---px !important;
--carousel-tile-width: ---px !important;
}
```
### Changing Growth Factor
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;
}
```
### Changing Fade Opacity
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;
}
```
### Changing Transition Speed
`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;
}
```
## Inspired By
* [Pure-CSS Netflix Show Carousel](https://codepen.io/joshhunt/pen/LVQZRa) - By Josh Hunt
## Authors
* **Anthony Krivonos** - *Initial work* - [Portfolio](https://anthonykrivonos.com)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
* Josh Hunt
* Vicki Shao for all the support and flames! 🔥