{"id":14990301,"url":"https://github.com/festify/ken-burns-carousel","last_synced_at":"2026-02-27T21:43:52.097Z","repository":{"id":57289016,"uuid":"125378065","full_name":"Festify/ken-burns-carousel","owner":"Festify","description":"🌄 A web component that displays a set of images with a ken burns effect","archived":false,"fork":false,"pushed_at":"2018-10-29T09:58:12.000Z","size":68,"stargazers_count":135,"open_issues_count":4,"forks_count":11,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-18T03:36:16.321Z","etag":null,"topics":["carousel","ken-burns","slideshow","web-component"],"latest_commit_sha":null,"homepage":"https://festify.github.io/ken-burns-carousel/","language":"TypeScript","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/Festify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-15T14:17:21.000Z","updated_at":"2024-07-24T18:44:35.000Z","dependencies_parsed_at":"2022-09-20T05:26:51.294Z","dependency_job_id":null,"html_url":"https://github.com/Festify/ken-burns-carousel","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Festify%2Fken-burns-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Festify%2Fken-burns-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Festify%2Fken-burns-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Festify%2Fken-burns-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Festify","download_url":"https://codeload.github.com/Festify/ken-burns-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230415317,"owners_count":18222158,"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":["carousel","ken-burns","slideshow","web-component"],"created_at":"2024-09-24T14:19:51.439Z","updated_at":"2026-02-27T21:43:52.067Z","avatar_url":"https://github.com/Festify.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \\\u003cken-burns-carousel\\\u003e\n[![Travis](https://travis-ci.org/Festify/ken-burns-carousel.svg?branch=master)](https://travis-ci.org/Festify/ken-burns-carousel)\n\nA bare and extremely light web component that displays a set of images with a ken burns effect. [Demo](https://festify.github.io/ken-burns-carousel/).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://festify.github.io/ken-burns-carousel/\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/1683034/37485135-e91fc698-288a-11e8-973b-999f86d3fd97.gif\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\nImport the JS:\n```js\n/*\n * Importing directly from the element defines the element class\n * and registers it with the global element registry with the tag\n * name 'ken-burns-carousel'.\n */\nimport 'ken-burns-carousel';\n```\n\nAlternatively:\n\n```js\n/*\n * In case the default name conflicts, you can import from\n * 'ken-burns-element/dist/element'. This export _does not_ register\n * the element with the element registry and allows you to choose\n * a custom tag name.\n */\nimport KenBurnsElement from 'ken-burns-carousel/dist/element';\n\ncustomElements.define('custom-ken-burns-element-tag', KenBurnsElement);\n```\n\nUse the element in the DOM:\n```html\n\u003c!-- Set images to display via attribute (property is also supported) --\u003e\n\u003cken-burns-carousel images=\"https://source.unsplash.com/Qh9Swf_8DyA https://source.unsplash.com/O453M2Liufs\"\u003e\n\u003c/ken-burns-carousel\u003e\n```\n\nAnd the carousel will begin fading images ✨. See the [Demo](https://festify.github.io/ken-burns-carousel/) for more examples.\n\n## Compatibility\nThe element works in all evergreen browsers (tested on Firefox, Chrome, Safari and Edge). Mileage with other browsers may vary.\n\nThat said, the element does not do any complex DOM operations or use any fancy APIs (except for web components, of course), so adapting it, if needed, will be simple. The element has been adapted for usage with the ShadyDOM polyfill.\n\n## Performance\nThe element makes careful use of composition layers and uses CSS 3D transforms and opacity animations exclusively. As such, animations will run butter smooth even when expensive filters are applied to the images.\n\nThe element also preloads images before displaying them so that FOUCs are prevented. This also works across different image lists. For optimal results, ensure the element has a nice background color as the element is transparent while the first image is loading.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffestify%2Fken-burns-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffestify%2Fken-burns-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffestify%2Fken-burns-carousel/lists"}