{"id":42633326,"url":"https://github.com/timelessco/js-carousel","last_synced_at":"2026-01-29T05:26:30.372Z","repository":{"id":154897900,"uuid":"629509304","full_name":"timelessco/js-carousel","owner":"timelessco","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-15T11:50:57.000Z","size":8973,"stargazers_count":0,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-15T16:29:57.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://js-carousel-theta.vercel.app/","language":"HTML","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/timelessco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2023-04-18T13:07:18.000Z","updated_at":"2023-08-30T07:31:29.000Z","dependencies_parsed_at":"2026-01-07T19:09:49.748Z","dependency_job_id":null,"html_url":"https://github.com/timelessco/js-carousel","commit_stats":null,"previous_names":["timelessco/js-carousel"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/timelessco/js-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Fjs-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Fjs-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Fjs-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Fjs-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timelessco","download_url":"https://codeload.github.com/timelessco/js-carousel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timelessco%2Fjs-carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28863563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"online","status_checked_at":"2026-01-29T02:00:06.714Z","response_time":59,"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":[],"created_at":"2026-01-29T05:26:29.647Z","updated_at":"2026-01-29T05:26:30.368Z","avatar_url":"https://github.com/timelessco.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Js Carousel:\n\nA pure Js customisable carousel, that snaps! uses CSS scroll snap on mobile.\n\n## Features:\n\n- Supports snapping of carousel.\n- Supports autoplay with a specified interval.\n- Supports scrolling and dragging.\n- Direction is alterable.\n- Alignment is alterable.\n\n## Dependencies:\n\n- Use Gesture: https://use-gesture.netlify.app/docs/#vanilla-javascript\n- Anime js: https://animejs.com/\n\n## Props:\n\n### parent:\n\nA selector for an existing DOM element that wraps all the carousel\nelements/items. This is a required prop.\n\n\u003e Type: string\n\n\u003e Example: '.parent' || '#parent'\n\n### child:\n\nA selector for each carousel element sharing the same class, wrapped by the\nparent element. This is a required prop.\n\n\u003e Type: string\n\n\u003e Example: '.child'\n\n### dragActive:\n\nThis prop decides whether the carousel is draggable or not.\n\n\u003e Type: boolean\n\n\u003e Default: true\n\n### scrollActive:\n\nThis prop decides whether the carousel is scrollable or not.\n\n\u003e Type: boolean\n\n\u003e Default: true\n\n### slidesToScroll:\n\nDepicts the number of slides that would scroll together.\n\n\u003e Type: number\n\n\u003e Default: 1\n\n### axis:\n\nDepicts the axis in which the carousel would scroll.\n\n\u003e Type: string\n\n\u003e Default: 'x'\n\n### dragFree:\n\nThis boolean is used to decide whether to stop at the snappoint or not. when\ntrue, this prop allows free dragging without stopping at snappoints.\n\n\u003e Type: boolean\n\n\u003e Default: false\n\n### alignment:\n\nDecides the alignment of each child of the carousel. Alignment: 'center' allows\nthe carousel to snap at the center of each child of the carousel.\n\n\u003e Type: string\n\n\u003e Options: 'start'||'center'||'end' Default: 'start'\n\n### direction:\n\nDecides the direction of the carousel's movement which would be from 'left to\nright' or 'right to left'.\n\n\u003e Type: string\n\n\u003e Options: 'ltr' || 'rtl'\n\n### startIndex:\n\nThe child index at which the carousel begins.\n\n\u003e Type: number\n\n\u003e Default: 1\n\n### autoplay:\n\nBoolean that decides whether the carousel progresses automatically or not at a\nspecified interval.\n\n\u003e Type: Boolean\n\n\u003e Default: false\n\n### autoplayTimeout:\n\nThe interval between the automatic progression of each slide in the carousel.\n\n\u003e Type: number (in ms)\n\n\u003e Default: 2000\n\n### springConfig:\n\nThe spring animation value is configurable using this prop.\n\n\u003e Type: string\n\n\u003e Default: `spring(1,90,20,13)` which is\n\u003e `spring(mass, stiffness, damping, velocity)`\n\n### selectedState:\n\nBoolean that decides whether a selected state exists - one slide is highlighted\nat a time, while scrolling of the carousel.\n\n\u003e Type: boolean\n\n\u003e Default: false\n\n### selectedScrollClassName:\n\nThe classname that would be added to the particular slide that is highlighted.\n\n\u003e Type: string\n\n\u003e Default: 'selected'\n\n### selectedScrollSnapIndex:\n\nThe index of the selected/ highlighted slide is decided by this prop.\n\n\u003e Type: number\n\n\u003e Default: 0 (starts from the 1st slide)\n\n### breakpoints:\n\nThis prop is helpful in altering props at different breakpoints.\n\neg:\n\n```\nCarousel({\n      dragActive: true,\n     breakpoints: {\n    'max-width: 768px': { dragActive: false },\n     },\n    })\n```\n\n### displayDots:\n\nBoolean to decide whether or not to display the carousel indicators\n\n\u003e Type: boolean\n\n\u003e Default: false\n\n### dotsHtml:\n\nHTML element that would be displayed instead of each dot - Number of dots are\ncalculated based on the number of slides.\n\n\u003e Type: HTML element as a string\n\n\u003e Default:\n\n```\n\u003csvg height=\"12\" width=\"12\" class=\"dots\"\u003e\n\u003ccircle cx=\"5\" cy=\"5\" r=\"2.5\" stroke=\"gray\" stroke-width=\"3\" fill=\"gray\" /\u003e\n\u003c/svg\u003e\n```\n\n## Lifecycle methods\n\n### whileScrolling:\n\nThis callback function can be used to perform operations while scrolling the\ncarousel.\n\n\u003e Type: function\n\neg:\n\n```\n Carousel({\n  whileScrolling: (scrollProgress, currentSlideIndex, currentSlidePos) =\u003e {\n    // scrollProgress - returns progress value of the carousel from 0 to 1\n    // currentSlideIndex - the index of current slide\n    // currentSlidePos - position of current slide\n  },\n})\n\n```\n\n### whileDragging:\n\nThis callback function can be used to perform operations while Dragging the\ncarousel.\n\n\u003e Type: function\n\neg:\n\n```\nCarousel({\n  whileDragging: (scrollProgress, currentSlideIndex, currentSlidePos) =\u003e {\n    // scrollProgress - returns progress value of the carousel from 0 to 1\n    // currentSlideIndex - the index of current slide\n    // currentSlidePos - position of current slide\n  },\n})\n\n```\n\n### onInit:\n\nThis callback function can be used to perform operations during the\ninitialization of the carousel.\n\n### onClicking:\n\nThis callback function can be used to perform operations while clicking on each\ncarousel.\n\n### watchResize:\n\nThe callback function can be used to perform operations while resizing the\nwindow\n\n### watchSlides:\n\nThe callback function can be used to perform operations while the child list of\nthe carousel is altered.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelessco%2Fjs-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimelessco%2Fjs-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimelessco%2Fjs-carousel/lists"}