{"id":25739684,"url":"https://github.com/anthonykrivonos/flix-carousel","last_synced_at":"2025-06-23T14:36:42.692Z","repository":{"id":95504759,"uuid":"149015969","full_name":"anthonykrivonos/flix-carousel","owner":"anthonykrivonos","description":"🎠 Netflix-style carousel made in pure CSS!","archived":false,"fork":false,"pushed_at":"2018-09-17T04:13:17.000Z","size":8,"stargazers_count":32,"open_issues_count":3,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-08T20:55:41.635Z","etag":null,"topics":["animated","carousel","collection","css","library","netflix"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anthonykrivonos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-16T16:51:52.000Z","updated_at":"2023-10-03T21:34:17.000Z","dependencies_parsed_at":"2023-08-30T17:00:36.762Z","dependency_job_id":null,"html_url":"https://github.com/anthonykrivonos/flix-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anthonykrivonos/flix-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonykrivonos%2Fflix-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonykrivonos%2Fflix-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonykrivonos%2Fflix-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonykrivonos%2Fflix-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonykrivonos","download_url":"https://codeload.github.com/anthonykrivonos/flix-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonykrivonos%2Fflix-carousel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261495432,"owners_count":23167317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","carousel","collection","css","library","netflix"],"created_at":"2025-02-26T08:29:27.752Z","updated_at":"2025-06-23T14:36:42.650Z","avatar_url":"https://github.com/anthonykrivonos.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flix Carousel\n\n*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.\n\nSee *Flix Carousel* in action.\n\n![Flix Carousel Example](https://media.giphy.com/media/8Bl3HslMi1d8DQvLLb/giphy.gif)\n\n```\n\u003cdiv class=\"carousel\"\u003e\n    \u003cdiv class=\"carousel-row\"\u003e\n          \u003cdiv class=\"carousel-tile\" style=\"background: #46B1C9;\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"carousel-tile\" style=\"background: #84C0C6;\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"carousel-tile\" style=\"background: #9FB7B9;\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"carousel-tile\" style=\"background: #BCC1BA;\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"carousel-tile\" style=\"background: #F2E2D2;\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Getting Started\n\n### Installing\n\nTo install via CDN, add this to the bottom of your `\u003chead\u003e` tag. Hosted by [RawGit](https://rawgit.com/).\n```\n\u003clink href=\"https://cdn.rawgit.com/anthonykrivonos/flix-carousel/65556d56/src/carousel.css\" rel=\"stylesheet\"\u003e\n```\n\nTo install manually, download this repository, add the contents to the root of your project, and link the source CSS at the bottom of your `\u003chead\u003e` tag.\n```\n\u003clink href=\"src/carousel.css\" rel=\"stylesheet\"\u003e\n```\n\nEnd with an example of getting some data out of the system or using it for a little demo\n\n## Overwriting Default Styling\n\nAdd the following to another CSS file linked to your project, or in a `\u003cstyle\u003e` tag within your HTML file.\n\n### Changing Tile Spacing/Height/Width\n```\n:root {\n    --carousel-tile-spacing: ---px !important;\n    --carousel-tile-height:  ---px !important;\n    --carousel-tile-width:   ---px !important;\n}\n```\n\n### Changing Growth Factor\nThe growth factor is the rate at which a tile grows when hovered over.\n\n`\u003c1:` Shrink\n\n`1 :` Normal\n\n`\u003e1:` Grow\n```\n:root {\n    --carousel-growth-factor: --- !important;\n}\n```\n### Changing Fade Opacity\nThe fade opacity is the opacity of tiles that are not currently hovered, while another tile is currently hovered (value out of 1).\n```\n:root {\n    --carousel-fade-opacity: --- !important;\n}\n```\n\n### Changing Transition Speed\n`X:`\n`1` for 1s transition\n\n`2` for 0.5s transition\n\n`3` for 0.3s transition\n\n```\n.carousel-tile {\n      transition: var(--carousel-transition-X) !important;\n}\n.carousel-row {\n      transition: var(--carousel-transition-X) !important;\n}\n```\n\n## Inspired By\n\n* [Pure-CSS Netflix Show Carousel](https://codepen.io/joshhunt/pen/LVQZRa) - By Josh Hunt\n\n## Authors\n\n* **Anthony Krivonos** - *Initial work* - [Portfolio](https://anthonykrivonos.com)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Acknowledgments\n\n* Josh Hunt\n* Vicki Shao for all the support and flames! 🔥\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonykrivonos%2Fflix-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonykrivonos%2Fflix-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonykrivonos%2Fflix-carousel/lists"}