{"id":21283585,"url":"https://github.com/hellraiserrob/carousel","last_synced_at":"2026-03-19T19:41:39.747Z","repository":{"id":248713847,"uuid":"829079807","full_name":"hellraiserrob/carousel","owner":"hellraiserrob","description":"A simple but essential carousel library ","archived":false,"fork":false,"pushed_at":"2024-07-18T09:29:10.000Z","size":89,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-05T01:18:52.824Z","etag":null,"topics":["carousel"],"latest_commit_sha":null,"homepage":"https://hellraiserrob.github.io/carousel/","language":"HTML","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/hellraiserrob.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-15T18:01:40.000Z","updated_at":"2024-07-21T19:45:45.000Z","dependencies_parsed_at":"2024-07-16T18:06:06.632Z","dependency_job_id":"37ac3a38-c9cb-442d-81eb-eed28f821892","html_url":"https://github.com/hellraiserrob/carousel","commit_stats":null,"previous_names":["hellraiserrob/carousel"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hellraiserrob/carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellraiserrob%2Fcarousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellraiserrob%2Fcarousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellraiserrob%2Fcarousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellraiserrob%2Fcarousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hellraiserrob","download_url":"https://codeload.github.com/hellraiserrob/carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellraiserrob%2Fcarousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29432607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T02:20:56.896Z","status":"ssl_error","status_checked_at":"2026-02-14T02:11:29.478Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["carousel"],"created_at":"2024-11-21T11:10:17.790Z","updated_at":"2026-02-14T02:44:59.862Z","avatar_url":"https://github.com/hellraiserrob.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Carousel banner](./.github/assets/banner.svg)](https://hellraiserrob.github.io/carousel)\n\n# Carousel\n\nAn example of a flexible carousel library for you to take and use as you wish in your projects.  It's simple to use the lbirary to wrap your own UI elements in standard carousel functionality.  See the demo page for some simple examples.\n\n[Demo](https://hellraiserrob.github.io/carousel/)\n\n## Features\n\n- Vanilla Typescript\n- Light \u0026 Responsive\n- Touch events\n- Use in your projects or as learning material\n\n## Options\n\n\n## Setup\n\nPass options to configure your carousel for different breakpoints\n\n### Options\n\n|             | Description | Type    | \n| ----------- | ----------- | ------- | \n| el    | The pixel \u003e= this should apply to  | HTMLElement |\n| grid    | See Grid type below  | Grid[] |\n| showPager?    | Optional flag to hide the carousel pager  | Boolean |\n\n### Grid\n\n|             | Description | Type    | \n| ----------- | ----------- | ------- | \n| width    | If the viewport width is higher than this number the below items total will be used  | number |\n| items    | The number of carousel slides to show at one time   | number |\n\n### Usage\n\ne.g.\n\n```javascript\nimport Carousel from \"./carousel\"\n\nconst carousels = document.querySelectorAll\u003cHTMLElement\u003e(`.carousel`);\n\ntiles.forEach(el =\u003e {\n  const options: Options = {\n    el,\n    grid: [{\n      width: 0, // from 0px - 699px there will only be 1 slide visible\n      items: 1\n    }, {\n      width: 700, // from 700px - 899px there will only be 2 slides visible\n      items: 2\n    }, {\n      width: 900, // from \u003e 900px there will 8 slides visible\n      items: 8\n    }\n    ]\n  };\n  const c = new Carousel(options)\n\n  c.setup();\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellraiserrob%2Fcarousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhellraiserrob%2Fcarousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellraiserrob%2Fcarousel/lists"}