{"id":16485346,"url":"https://github.com/morganconrad/svlider","last_synced_at":"2026-06-03T20:31:39.033Z","repository":{"id":222036037,"uuid":"756009726","full_name":"MorganConrad/Svlider","owner":"MorganConrad","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-06T20:51:00.000Z","size":62,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T00:11:48.127Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/MorganConrad.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-11T18:13:06.000Z","updated_at":"2024-05-06T20:51:03.000Z","dependencies_parsed_at":"2024-02-11T23:21:24.206Z","dependency_job_id":"73de0cf9-e2c8-4a71-926f-f367e748f75a","html_url":"https://github.com/MorganConrad/Svlider","commit_stats":null,"previous_names":["morganconrad/svlider"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MorganConrad/Svlider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2FSvlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2FSvlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2FSvlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2FSvlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorganConrad","download_url":"https://codeload.github.com/MorganConrad/Svlider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorganConrad%2FSvlider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33878990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-03T02:00:06.370Z","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":"2024-10-11T13:25:30.724Z","updated_at":"2026-06-03T20:31:39.009Z","avatar_url":"https://github.com/MorganConrad.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svlider\n\nAn extremely simple, basic, lightweight image _and video_ slider component for Svelte.\nIt doesn't try to do \"everything\", but you can extend or add mixins to change the behavior.\n\nTo demo, `npm run dev` or `npm run dev -- --open`\n\nNote: If you need something fancier, check out [svelte-splide](https://splidejs.com/integration/svelte-splide/) which is far more complete, and complex.\n\n## What is Svlider good for?\n\n 1. It does [One Thing Well:](https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well) build the HTML for a slider from a list of urls.\n 2. You can mix images and videos, and it will try to figure things out.\n 3. It's tiny.\n\n@See /routes/+page.svelte for a demo.\n\n````\nimport { Svlider } from ...\n\nlet urls = [url1, url2, ...];   // a list of image or video urls (strings)\n\n\u003cdiv class=\"containingDiv\"\u003e  // Optional, but so you can control size here with CSS\n\u003cSvlider class=\"svlider\" {urls}/\u003e\n\u003c/div\u003e\n````\n\nYou can also create your own images and videos and pass them in, or use existing HTML, then hook them up using a selector.  @See /routes/selector/+page.svelte for a demo.\n\n## API\n\nSvlider exports five arguments.  #1 and #2 are rarely used, one should prefer #3\n\n 1. `selector`: (string) to select the slides from within the existing component\n 2. `slides`  : (array)  to pass in _existing_ \u0026lt;image\u0026gt; or  \u0026lt;video\u0026gt; elements\n 3. `urls`    : (array)  urls, from which \u0026lt;image\u0026gt; or  \u0026lt;video\u0026gt; elements will be created\n   - **Note:** At least _one_ of 1,2, or 3 _must be set_.\n 4. `options` : (object) options\n 5. `mixin`   : (object) if you really want to mess around...\n\n## Options\n\n@See /src/lib/svlider.js.DEFAULTS\n\n - startIndex: Initial element (\"slide\") to show, default = 0\n - lazyThreshold: use lazy loading if more slides than this, default = 6\n - slideClasses: CSS classes for an individual slide, default = ['svlide']\n - @deprecated  // svliderClasses: CSS classes for the svlider, default = ['svlider'],\n - buttonSVGs: SVGs for the previous and next buttons.\n - videoExtensions: Treat a url as a video if it ends in one of these.  default = [\".mp4\"]\n\n## What Doesn't it Do?\n\n1. It doesn't try to solve everything.  The control buttons are simple, it only shows one image at a time, nor or there many bells and whistles.\n2. The CSS is simplistic.\n3. Images of different aspect ratios need work?\n4. However, the underlying code (@See svlider.js) is designed, I hope, so that one can change or add functionality via subclasses or mixins.\n\n## I don't use Svelte, what's the point?\n\nAlmost all the logic in is svlider.js, and should be applicable to non-Svelte applications.\n\n## TODOs and Changelog\n\n - v0.0.2  Buttons changed from text to SVGs.  Cleanup.\n - v0.1.0  More cleanup.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganconrad%2Fsvlider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorganconrad%2Fsvlider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganconrad%2Fsvlider/lists"}