{"id":13402891,"url":"https://github.com/rcaferati/react-awesome-slider","last_synced_at":"2026-03-04T13:00:36.828Z","repository":{"id":31887235,"uuid":"60983528","full_name":"rcaferati/react-awesome-slider","owner":"rcaferati","description":"React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱 ","archived":false,"fork":false,"pushed_at":"2023-10-19T13:39:39.000Z","size":62358,"stargazers_count":2960,"open_issues_count":78,"forks_count":292,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-12-28T19:51:51.012Z","etag":null,"topics":["carousel","carousel-component","fullpage-navigation-hoc","gallery","gallery-component","gatsbyjs","image-gallery","image-slider","media-gallery","media-slider","next","next-page-transitions","nextjs","react","react-carousel","react-component","react-gallery","react-slider","reactjs","ui-components"],"latest_commit_sha":null,"homepage":"https://fullpage.caferati.me","language":"JavaScript","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/rcaferati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-06-12T18:45:33.000Z","updated_at":"2025-12-22T04:52:09.000Z","dependencies_parsed_at":"2024-01-13T05:10:52.683Z","dependency_job_id":"cee6f241-3f5f-489e-8c84-9e4293e9bc3f","html_url":"https://github.com/rcaferati/react-awesome-slider","commit_stats":{"total_commits":242,"total_committers":9,"mean_commits":26.88888888888889,"dds":0.06611570247933884,"last_synced_commit":"cb145e2d7494199410057e954fc99aa768f2a571"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/rcaferati/react-awesome-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rcaferati","download_url":"https://codeload.github.com/rcaferati/react-awesome-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-slider/sbom","scorecard":{"id":764355,"data":{"date":"2025-08-11","repo":{"name":"github.com/rcaferati/react-awesome-slider","commit":"cb145e2d7494199410057e954fc99aa768f2a571"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"name":"Code-Review","score":1,"reason":"Found 2/15 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 22 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"126 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T00:20:49.924Z","repository_id":31887235,"created_at":"2025-08-23T00:20:49.924Z","updated_at":"2025-08-23T00:20:49.924Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30081042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T12:28:08.313Z","status":"ssl_error","status_checked_at":"2026-03-04T12:27:28.210Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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","carousel-component","fullpage-navigation-hoc","gallery","gallery-component","gatsbyjs","image-gallery","image-slider","media-gallery","media-slider","next","next-page-transitions","nextjs","react","react-carousel","react-component","react-gallery","react-slider","reactjs","ui-components"],"created_at":"2024-07-30T19:01:22.535Z","updated_at":"2026-03-04T13:00:36.808Z","avatar_url":"https://github.com/rcaferati.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Components","Please find below the links to awesome cheat-sheet and resources:","*.js","TypeScript"],"sub_categories":["Carousel","React/React-Native:","React"],"readme":"# React `\u003cAwesomeSlider /\u003e`\n\n`@rcaferati/react-awesome-slider` provides a fast, production-ready slider/carousel with optional HOCs:\n\n- **`AwesomeSlider`** — animated media/children slider\n- **`withAutoplay`** — autoplay wrapper\n- **`withCaptionedImages`** — caption overlay wrapper\n- **`withAnimatedLettering`** — “screens → \u003cp\u003e lines” wrapper\n- **Navigation utilities** — `Provider`, `Link`, `withNavigationContext`, `withNavigationHandlers`\n\nThis README is updated for the current v5+ patterns (functional core + CSS variables + optional CSS Modules).\n\n---\n\n## Installation\n\n```bash\nnpm install @rcaferati/react-awesome-slider\n```\n\nPeer deps:\n\n- `react \u003e= 18`\n- `react-dom \u003e= 18`\n\n---\n\n## Quick Start\n\n### Plain CSS (no CSS Modules)\n\n```jsx\nimport React from 'react';\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\nimport '@rcaferati/react-awesome-slider/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeSlider\u003e\n      \u003cdiv data-src=\"https://picsum.photos/id/1018/1200/600\" /\u003e\n      \u003cdiv data-src=\"https://picsum.photos/id/1015/1200/600\" /\u003e\n      \u003cdiv data-src=\"https://picsum.photos/id/1019/1200/600\" /\u003e\n    \u003c/AwesomeSlider\u003e\n  );\n}\n```\n\n### Media prop (recommended for deterministic slides)\n\n```jsx\nimport React from 'react';\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\nimport '@rcaferati/react-awesome-slider/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeSlider\n      media={[\n        { source: 'https://picsum.photos/id/1018/1200/600', slug: 'slide-1' },\n        { source: 'https://picsum.photos/id/1015/1200/600', slug: 'slide-2' },\n        { source: 'https://picsum.photos/id/1019/1200/600', slug: 'slide-3' },\n      ]}\n    /\u003e\n  );\n}\n```\n\n---\n\n## Animations\n\n### Default animation: `sideAnimation`\n\nThe default “side” animation ships in the base stylesheet:\n\n```js\nimport '@rcaferati/react-awesome-slider/styles.css';\n```\n\n### Extra animation recipes\n\nLoad one of the extra animation stylesheets and set `animation`:\n\n- `cubeAnimation`\n- `fallAnimation`\n- `foldOutAnimation`\n- `openAnimation`\n- `scaleOutAnimation`\n\n```jsx\nimport React from 'react';\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\n\nimport '@rcaferati/react-awesome-slider/styles.css';\nimport '@rcaferati/react-awesome-slider/custom-animations/cube-animation.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeSlider animation=\"cubeAnimation\"\u003e\n      \u003cdiv data-src=\"https://picsum.photos/id/1018/1200/600\" /\u003e\n      \u003cdiv data-src=\"https://picsum.photos/id/1015/1200/600\" /\u003e\n      \u003cdiv data-src=\"https://picsum.photos/id/1019/1200/600\" /\u003e\n    \u003c/AwesomeSlider\u003e\n  );\n}\n```\n\n\u003e Tip: When `animation=\"sideAnimation\"` you typically omit `animation` entirely (core defaults).\n\n---\n\n## Styling\n\n### CSS variables (recommended)\n\nThe core stylesheet exposes CSS variables on the slider root element (default `awssld`).\nYou can override them per instance using `style`:\n\n```jsx\n\u003cAwesomeSlider\n  style={{\n    // arrows\n    '--organic-arrow-color': 'rgba(255,255,255,0.9)',\n    '--organic-arrow-height': '44px',\n    '--organic-arrow-thickness': '4px',\n\n    // bullets\n    '--control-bullet-color': 'rgba(255,255,255,0.35)',\n    '--control-bullet-active-color': 'rgba(255,255,255,0.9)',\n\n    // content\n    '--content-background-color': '#10131a',\n  }}\n/\u003e\n```\n\n### CSS Modules (`cssModule`)\n\nIf your bundler emits CSS module maps, you can pass module objects via `cssModule`.\nMany setups export the module object as `default` — this pattern is safe:\n\n```jsx\nimport AwsSliderStyles from '@rcaferati/react-awesome-slider/dist/styles.css?inline'; // (example — depends on bundler)\n```\n\nIn this repository’s Storybook setup, `*.scss` imports resolve to CSS module maps. In consumer apps, you’ll typically import prebuilt CSS files (`styles.css`, `captioned.css`, `lettering.css`, and `custom-animations/*.css`) unless you have a CSS-module pipeline configured.\n\n---\n\n## `AwesomeSlider`\n\n### Common usage patterns\n\n#### Children mode (HTML slides)\n\n```jsx\n\u003cAwesomeSlider\u003e\n  \u003cdiv style={{ background: '#0b0f18', height: '100%' }}\u003e\n    \u003ch2 style={{ color: 'white' }}\u003eSlide A\u003c/h2\u003e\n  \u003c/div\u003e\n  \u003cdiv style={{ background: '#f4f6fb', height: '100%' }}\u003e\n    \u003ch2 style={{ color: '#111' }}\u003eSlide B\u003c/h2\u003e\n  \u003c/div\u003e\n\u003c/AwesomeSlider\u003e\n```\n\n#### Media mode (images/videos)\n\n```jsx\n\u003cAwesomeSlider\n  media={[\n    { source: '/img/0.jpg', slug: 'a' },\n    { source: '/img/1.jpg', slug: 'b' },\n  ]}\n/\u003e\n```\n\n---\n\n## `AwesomeSlider` Props (current)\n\n| Prop                  | Type                         | Default            | Description                                                                             |\n| --------------------- | ---------------------------- | ------------------ | --------------------------------------------------------------------------------------- |\n| `media`               | `MediaItem[]`                | `[]`               | Slides as objects (`{ source, slug, preload? }`).                                       |\n| `children`            | `ReactNode`                  | `null`             | Slides as React children (supports `data-src` / `data-slug`).                           |\n| `selected`            | `number \\| string`           | `0`                | Active slide index (number) or slug (string).                                           |\n| `name`                | `string`                     | `'awesome-slider'` | Instance name (useful when multiple sliders are present).                               |\n| `animation`           | `string \\| null`             | `null`             | Animation key (`cubeAnimation`, `fallAnimation`, etc). Omit for default side animation. |\n| `buttons`             | `boolean`                    | `true`             | Show next/prev buttons.                                                                 |\n| `bullets`             | `boolean`                    | `true`             | Show bullets.                                                                           |\n| `organicArrows`       | `boolean`                    | `true`             | Use the organic arrow shape styling.                                                    |\n| `infinite`            | `boolean`                    | `true`             | Wrap-around navigation.                                                                 |\n| `fillParent`          | `boolean`                    | `false`            | Fill parent bounds (fullscreen layouts).                                                |\n| `startupScreen`       | `ReactNode`                  | `null`             | Optional startup screen shown before first slide.                                       |\n| `startup`             | `boolean`                    | `true`             | If `startupScreen` is set, whether to auto-start into first slide.                      |\n| `startupDelay`        | `number`                     | `0`                | Delay before auto-start.                                                                |\n| `transitionDelay`     | `number`                     | `0`                | Delay before starting transition animation (ms).                                        |\n| `controlsReturnDelay` | `number`                     | `0`                | Delay to remove “controls active” class after transitions (ms).                         |\n| `mobileTouch`         | `boolean`                    | `true`             | Enables touch/swipe navigation.                                                         |\n| `cssModule`           | `object \\| object[] \\| null` | `null`             | CSS module map(s) used to map class names.                                              |\n| `className`           | `string \\| null`             | `null`             | Extra className(s) added to root element.                                               |\n| `style`               | `React.CSSProperties`        | `{}`               | Inline styles (also used for CSS variables).                                            |\n| `onFirstMount`        | `(info) =\u003e void`             | `null`             | Called once after mount with `getInfo()` payload.                                       |\n| `onTransitionStart`   | `(info) =\u003e void`             | `null`             | Called on transition start.                                                             |\n| `onTransitionEnd`     | `(info) =\u003e void`             | `null`             | Called on transition end.                                                               |\n| `onTransitionRequest` | `(info) =\u003e void`             | `null`             | Called when user requests a transition (next/prev/bullet).                              |\n| `onTransitionReject`  | `(info) =\u003e void`             | `null`             | Called when a transition is rejected (e.g., busy/loading).                              |\n| `onLoadStart`         | `(payload) =\u003e void`          | `null`             | Optional custom preload hook. Call `payload.next()` when ready.                         |\n\n### `getInfo()` payload (high level)\n\n`getInfo()` is used by the event callbacks and includes (best-effort):\n\n- `slides` — slide count\n- `currentIndex` — current index\n- `currentMedia` — current media item\n- `currentSlide` — active slide element (when available)\n- `element` — slider root element\n\n---\n\n## HOCs\n\n### Autoplay\n\n```jsx\nimport React from 'react';\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\nimport withAutoplay from '@rcaferati/react-awesome-slider/autoplay';\nimport '@rcaferati/react-awesome-slider/styles.css';\n\nconst AutoplaySlider = withAutoplay(AwesomeSlider);\n\nexport default function Example() {\n  return (\n    \u003cAutoplaySlider\n      play={true}\n      cancelOnInteraction={false}\n      interval={6000}\n      media={[\n        { source: 'https://picsum.photos/id/1018/1200/600' },\n        { source: 'https://picsum.photos/id/1015/1200/600' },\n      ]}\n    /\u003e\n  );\n}\n```\n\n### Captioned Images\n\n```jsx\nimport React from 'react';\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\nimport withCaptionedImages from '@rcaferati/react-awesome-slider/captioned';\n\nimport '@rcaferati/react-awesome-slider/styles.css';\nimport '@rcaferati/react-awesome-slider/captioned.css';\n\nconst Captioned = withCaptionedImages(AwesomeSlider);\n\nexport default function Example() {\n  return (\n    \u003cCaptioned\n      screens={[\n        {\n          media: 'https://picsum.photos/id/1018/1200/600',\n          caption: 'The first captioned slide',\n          backgroundColor: '#ffffff',\n        },\n        {\n          media: 'https://picsum.photos/id/1015/1200/600',\n          caption: 'Second slide — caption overlay',\n          backgroundColor: '#ffffff',\n        },\n      ]}\n    /\u003e\n  );\n}\n```\n\n### Animated Lettering\n\n```jsx\nimport React from 'react';\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\nimport withAnimatedLettering from '@rcaferati/react-awesome-slider/lettering';\n\nimport '@rcaferati/react-awesome-slider/styles.css';\nimport '@rcaferati/react-awesome-slider/lettering.css';\n\nconst Lettering = withAnimatedLettering(AwesomeSlider);\n\nexport default function Example() {\n  return (\n    \u003cLettering\n      screens={[\n        {\n          backgroundColor: '#ffffff',\n          children: [\n            'React Awesome Slider',\n            'Animated Lettering',\n            'Each line is a \u003cp\u003e',\n          ],\n        },\n        {\n          backgroundColor: '#f5f5f5',\n          children: ['Transitions are slide-based', 'Text moves on change'],\n        },\n      ]}\n    /\u003e\n  );\n}\n```\n\n### Adaptive Controls (optional HOC)\n\nIf your build includes `hoc/adaptive-controls`, it can compute a theme (light/dark) and apply CSS variables for arrows/bullets based on the active slide background.\n\n\u003e This HOC is intentionally CSS-modules-safe and applies variables to the real slider root.\n\n---\n\n## Fullpage Navigation Utilities\n\nThese are designed for SPA / “slides-as-routes” setups.\n\n### `Provider`\n\n```jsx\nimport React from 'react';\nimport { Provider } from '@rcaferati/react-awesome-slider/navigation';\n\nexport default function App({ children }) {\n  return (\n    \u003cProvider slug={window.location.pathname} defaultSlug=\"home\"\u003e\n      {children}\n    \u003c/Provider\u003e\n  );\n}\n```\n\n### `Link`\n\n```jsx\nimport React from 'react';\nimport { Link } from '@rcaferati/react-awesome-slider/navigation';\n\nexport default function Nav() {\n  return (\n    \u003cnav\u003e\n      \u003cLink href=\"/home\"\u003eHome\u003c/Link\u003e\n      \u003cLink href=\"/about\"\u003eAbout\u003c/Link\u003e\n      \u003cLink href=\"/contact\"\u003eContact\u003c/Link\u003e\n    \u003c/nav\u003e\n  );\n}\n```\n\n### `withNavigationHandlers`\n\nWrap a slider so URL ↔ slider selection stays aligned (supports popstate, retries on rejects, and mismatch correction).\n\n```jsx\nimport AwesomeSlider from '@rcaferati/react-awesome-slider';\nimport { withNavigationHandlers } from '@rcaferati/react-awesome-slider/navigation';\n\nconst SliderWithNav = withNavigationHandlers(AwesomeSlider);\n\nexport default function Page() {\n  return \u003cSliderWithNav /\u003e;\n}\n```\n\n---\n\n## Recommended patterns (current)\n\n### ✅ Prefer `media` for stable routing\n\nIf you use slugs + navigation handlers, keep `media` entries stable and include `slug`.\n\n### ✅ Keep animations modular\n\n- Always load `styles.css`\n- Load one extra animation CSS only when that animation is selected\n\n### ✅ Customize via CSS variables first\n\nTheme/contrast/polish is usually easiest via the exposed custom properties.\n\n---\n\n## Author\n\n**Rafael Caferati**  \nWebsite: https://caferati.dev  \nGitHub: https://github.com/rcaferati\n\n---\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcaferati%2Freact-awesome-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcaferati%2Freact-awesome-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcaferati%2Freact-awesome-slider/lists"}