{"id":25204294,"url":"https://github.com/kbelltree/image-carousel","last_synced_at":"2025-04-04T23:43:30.691Z","repository":{"id":236185754,"uuid":"792097377","full_name":"kbelltree/image-carousel","owner":"kbelltree","description":"The Odin Project: Image Carousel (Dynamic User Interface Interactions)","archived":false,"fork":false,"pushed_at":"2024-05-04T21:53:50.000Z","size":1014,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T08:17:16.660Z","etag":null,"topics":["css-flexbox","css-grid","html-css-javascript","image-carousel","javascript","the-odin-project"],"latest_commit_sha":null,"homepage":"https://kbelltree.github.io/image-carousel/","language":"JavaScript","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/kbelltree.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}},"created_at":"2024-04-26T01:10:46.000Z","updated_at":"2024-05-04T21:53:53.000Z","dependencies_parsed_at":"2024-04-26T02:26:58.890Z","dependency_job_id":"d6910358-23da-4cad-9b7c-f0e6fccb47b3","html_url":"https://github.com/kbelltree/image-carousel","commit_stats":null,"previous_names":["kbelltree/image-carousel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fimage-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fimage-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fimage-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fimage-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kbelltree","download_url":"https://codeload.github.com/kbelltree/image-carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266482,"owners_count":20910832,"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":["css-flexbox","css-grid","html-css-javascript","image-carousel","javascript","the-odin-project"],"created_at":"2025-02-10T08:17:23.104Z","updated_at":"2025-04-04T23:43:30.669Z","avatar_url":"https://github.com/kbelltree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image-carousel\n\u003ca href=\"https://kbelltree.github.io/image-carousel/\"\u003e\n\u003cdiv align=\"center\"\u003e\u003cimg src=\"image-carousel-the-odin-project-by-k-belltree-2024-min.png\" alt=\"Image Carousel Practice Preview by Keiko S. 2024\" width=\"50%\" height=\"50%\"\u003e\u003c/div\u003e\n\u003ca\u003e\n\n\u003cbr\u003e\n\nThis image carousel was developed as part of an assignment to demonstrate understanding of Dynamic User Interface Interactions from The Odin Project. For details on this project, please visit the lesson on ['Image carousel'](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions#image-carousel).\n\n## Key Project Instructions:\n\n- Set up images within a `div` element.\n\n- Create functions for the **back** and **next** buttons within the carousel to navigate through the images. Fancy slide effects are not required.\n\n- Add horizontally laid out **indicator dots** below the image carousel. These dots should be empty circles that fill in to indicate the current carousel image index. The dots should also be clickable, allowing users to skip to their preferred image.\n\n- Configure the carousel to **loop every 5 seconds**.\n\n## Built With:\n\n- HTML\n- CSS\n- JavaScript\n- Webpack\n- ESLint\n- Prettier\n\n\u003cbr\u003e\n\n---\n\n### Resources Used\n\n- UI Designing Tool by [Figma.com](https://www.figma.com)\n- Images by [PAKUTASO](https://www.pakutaso.com/)\n- SVG Icons by [Pictogrammers](https://pictogrammers.com/library/mdi/)\n- Searching Tool by [ChatGPT4](https://chat.openai.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbelltree%2Fimage-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbelltree%2Fimage-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbelltree%2Fimage-carousel/lists"}