{"id":19975131,"url":"https://github.com/zkreations/sheetslider","last_synced_at":"2025-05-04T02:33:24.791Z","repository":{"id":138253825,"uuid":"58415189","full_name":"zkreations/sheetslider","owner":"zkreations","description":"A pure CSS slider with no dependencies.","archived":false,"fork":false,"pushed_at":"2025-03-31T02:48:18.000Z","size":4056,"stargazers_count":24,"open_issues_count":0,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-08T02:03:35.758Z","etag":null,"topics":["no-dependencies","nojs","pure-css","responsive","sass","scss","slider","slider-image"],"latest_commit_sha":null,"homepage":"http://zkreations.github.io/sheetslider/","language":"SCSS","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/zkreations.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":".github/FUNDING.yml","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,"dei":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"zkreations","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2016-05-09T23:39:25.000Z","updated_at":"2025-03-31T02:18:45.000Z","dependencies_parsed_at":"2023-12-27T23:50:51.623Z","dependency_job_id":null,"html_url":"https://github.com/zkreations/sheetslider","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Fsheetslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Fsheetslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Fsheetslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Fsheetslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkreations","download_url":"https://codeload.github.com/zkreations/sheetslider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252279116,"owners_count":21722838,"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":["no-dependencies","nojs","pure-css","responsive","sass","scss","slider","slider-image"],"created_at":"2024-11-13T03:17:11.294Z","updated_at":"2025-05-04T02:33:24.776Z","avatar_url":"https://github.com/zkreations.png","language":"SCSS","funding_links":["https://ko-fi.com/zkreations"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width='50' src=\"https://raw.githubusercontent.com/zkreations/sheetslider/master/.github/logo.png\" align=\"center\" /\u003e\n\n  # SheetSlider\n\n  \u003cp\u003eA pure CSS slider with no dependencies. Designed to be as lightweight and fast as possible.\u003cp\u003e\n\n  \u003cp\u003e\u003ca href=\"https://zkreations.github.io/sheetslider/\"\u003e\u003cstrong\u003e Live Demo \u0026rarr;\u003c/strong\u003e\u003c/a\u003e\u003c/p\u003e\n\n  \u003cimg src=\"https://raw.githubusercontent.com/zkreations/sheetslider/master/.github/screenshot.png\" align=\"center\" /\u003e\n\u003c/div\u003e\n\n## Features\n\n- Pure and modern CSS\n- No dependencies\n- Lightweight (minified ~ 1kb with [Brotli](https://www.multiutil.com/text-to-brotli-compress/))\n- Fast and smooth\n- Responsive (intrinsic ratio)\n- Customizable with CSS and Sass variables\n- Easy to use\n- Multiple sliders on the same page\n- Open source\n\n## Install\n\n### npm\n\n```bash\nnpm install sheet-slider\n```\n\n### CDN\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sheet-slider@3/dist/css/main.min.css\"/\u003e\n```\n\n## How to use\n\nThe slider only needs a basic HTML structure to work:\n\n```html\n\u003cdiv class=\"sheet\"\u003e\n  \u003cinput id=\"a1\" type=\"radio\" name=\"a\" checked\u003e\n  \u003cinput id=\"a2\" type=\"radio\" name=\"a\"\u003e\n  \u003cinput id=\"a3\" type=\"radio\" name=\"a\"\u003e\n  \u003cdiv class=\"sheet-content\"\u003e\n    \u003cdiv class=\"sheet-item\"\u003e\n      \u003cimg class=\"sheet-image\" src=\"image.jpg\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sheet-item\"\u003e\n      \u003cimg class=\"sheet-image\" src=\"image.jpg\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sheet-item\"\u003e\n      \u003cimg class=\"sheet-image\" src=\"image.jpg\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"sheet-arrows\"\u003e\n    \u003clabel for=\"a1\"\u003e\u003c/label\u003e\n    \u003clabel for=\"a2\"\u003e\u003c/label\u003e\n    \u003clabel for=\"a3\"\u003e\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nAll content inside the `sheet-item` elements will be the ones that move. They don't necessarily have to be images, they can be any HTML element.\n\nThe slider also has two optional elements, which are the navigation buttons and the descriptive texts. If you include them, the structure would look like this:\n\n```html\n\u003cdiv class=\"sheet\"\u003e\n  \u003cinput id=\"a1\" type=\"radio\" name=\"a\" checked\u003e\n  \u003cinput id=\"a2\" type=\"radio\" name=\"a\"\u003e\n  \u003cinput id=\"a3\" type=\"radio\" name=\"a\"\u003e\n  \u003cdiv class=\"sheet-content\"\u003e\n    \u003cdiv class=\"sheet-item\"\u003e\n      \u003cimg class=\"sheet-image\" src=\"image.jpg\"\u003e\n      \u003c!-- description --\u003e\n      \u003cdiv class=\"sheet-meta\"\u003e\n        \u003ch4 class=\"sheet-title\"\u003eExample title\u003c/h4\u003e\n        \u003cp class=\"sheet-text\"\u003eText description\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sheet-item\"\u003e\n      \u003cimg class=\"sheet-image\" src=\"image.jpg\"\u003e\n      \u003c!-- description --\u003e\n      \u003cdiv class=\"sheet-meta\"\u003e\n        \u003ch4 class=\"sheet-title\"\u003eExample title\u003c/h4\u003e\n        \u003cp class=\"sheet-text\"\u003eText description\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"sheet-item\"\u003e\n      \u003cimg class=\"sheet-image\" src=\"image.jpg\"\u003e\n      \u003c!-- description --\u003e\n      \u003cdiv class=\"sheet-meta\"\u003e\n        \u003ch4 class=\"sheet-title\"\u003eExample title\u003c/h4\u003e\n        \u003cp class=\"sheet-text\"\u003eText description\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c!-- dots --\u003e\n  \u003cdiv class=\"sheet-dots\"\u003e\n    \u003clabel for=\"a1\"\u003e\u003c/label\u003e\n    \u003clabel for=\"a2\"\u003e\u003c/label\u003e\n    \u003clabel for=\"a3\"\u003e\u003c/label\u003e\n  \u003c/div\u003e\n  \u003c!-- arrows --\u003e\n  \u003cdiv class=\"sheet-arrows\"\u003e\n    \u003clabel for=\"a1\"\u003e\u003c/label\u003e\n    \u003clabel for=\"a2\"\u003e\u003c/label\u003e\n    \u003clabel for=\"a3\"\u003e\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Note:** The `for` attribute of the labels must match the `id` of the inputs. For multiple sliders on the same page, the `name` attribute of the inputs must be different, and the `for` attribute of the labels must match the `id` of the inputs of the slider to which they belong.\n\n## Customize\n\nDefine new values for the variables in your CSS file or in the `:root` selector.\n\n| Variable                | Description\n| ----------------------- | -------------\n| `--sheet-accent`        | Accent color\n| `--sheet-ratio`         | Aspect ratio\n| `--sheet-space`         | Space of the elements\n| `--sheet-arrow-size`    | Size of the arrows\n| `--sheet-duration`      | Animation duration\n| `--sheet-dot-size`      | Size of the dots\n| `--sheet-timing`        | Animation timing function\n| `--sheet-text-color`    | Text color\n| `--sheet-text-shadow`   | Text shadow\n| `--sheet-title-size`    | Title font size\n| `--sheet-text-size`     | Text font size\n| `--sheet-arrow-padding` | Padding of the arrows\n| `--sheet-arrow-bg`      | BG color of the arrows\n| `--sheet-arrow`         | SVG of the arrows\n| `--sheet-dot-gap`       | Space between the dots\n| `--sheet-dot-bg`        | BG color of the dots\n| `--sheet-dot-hover`     | BG color of the dots when hover\n\nYou can also modify the values in the `_variables.scss` file and compile it with Sass.\n\n## Options\n\nYou can choose between two animation modes: `fade` and `vertical`. By default, the animation mode is `horizontal`. If you want to change it, you just have to add the corresponding class to the main container:\n\n```html\n\u003cdiv class=\"sheet sheet-fade\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"sheet sheet-vertical\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n## Supporting\n\nIf you want to help me keep this and more related projects always up to date, you can [buy me a coffee](https://ko-fi.com/zkreations) ☕. I will be very grateful 👏.\n\n## License\n\n**Sheet Slider** is licensed under the MIT License\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkreations%2Fsheetslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkreations%2Fsheetslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkreations%2Fsheetslider/lists"}