{"id":20064635,"url":"https://github.com/kinolag/imc","last_synced_at":"2025-09-09T06:43:06.409Z","repository":{"id":101761731,"uuid":"162175907","full_name":"kinolag/imc","owner":"kinolag","description":"image_carousel_v1 (w/ links to A/V works)","archived":false,"fork":false,"pushed_at":"2019-02-13T13:01:34.000Z","size":33,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-14T11:59:11.585Z","etag":null,"topics":["audiovisual","dom-manipulation","flexbox-layout","image-carousel","javascript","keyboard-events"],"latest_commit_sha":null,"homepage":"https://kinolag.github.io/imc/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kinolag.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-12-17T18:52:34.000Z","updated_at":"2019-07-18T07:20:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"8ce1e4c6-0a50-419d-ad79-590268d63acb","html_url":"https://github.com/kinolag/imc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kinolag/imc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinolag%2Fimc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinolag%2Fimc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinolag%2Fimc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinolag%2Fimc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kinolag","download_url":"https://codeload.github.com/kinolag/imc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinolag%2Fimc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274254983,"owners_count":25250552,"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","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["audiovisual","dom-manipulation","flexbox-layout","image-carousel","javascript","keyboard-events"],"created_at":"2024-11-13T13:47:13.743Z","updated_at":"2025-09-09T06:43:06.379Z","avatar_url":"https://github.com/kinolag.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# imc\nimage_carousel_v1\n\nVersion 1: description\n\nAn image carousel that on click returns an image from an array, with additional bits of information:\nan image title, a text caption, a hypertext link and its name. The link is useful for applications where each image is related to, or is a presentation for another element (e.g. text page, music or video file).\n\nEach image has an associated animation which slightly changes the opacity. The opacity change is in sync with the slider time interval and gives the images a “breathing” feel. On mouse over, the animation is paused.\n\nThe carousel is responsive with a flexbox layout. Although I don’t find it essential, keyboard control has been added - including a “key to the keys” for usability (a media query hides this box at certain screen resolutions, rather than for specific devices).\n\nThe carousel can be integrated in one of my websites, where it can work as an alternative for a static index page presenting all the images at once. Two different approaches to presenting a collection of items.\n\nI have also imagined a more complex version 2 making use of objects with about 20 properties, which would allow me to manage my video gallery in a more complete and dynamic way. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkinolag%2Fimc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkinolag%2Fimc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkinolag%2Fimc/lists"}