{"id":16184054,"url":"https://github.com/fralonra/scroll-slide","last_synced_at":"2025-03-19T02:31:03.234Z","repository":{"id":94736556,"uuid":"123089112","full_name":"fralonra/scroll-slide","owner":"fralonra","description":"Flexible and pure-js scrollable slides maker.","archived":false,"fork":false,"pushed_at":"2020-05-07T07:28:02.000Z","size":86,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-26T10:05:28.184Z","etag":null,"topics":["pure-javascript","scrolling"],"latest_commit_sha":null,"homepage":"","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/fralonra.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":"2018-02-27T07:16:33.000Z","updated_at":"2021-04-27T12:21:29.000Z","dependencies_parsed_at":"2023-03-29T03:47:52.992Z","dependency_job_id":null,"html_url":"https://github.com/fralonra/scroll-slide","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":"0.42105263157894735","last_synced_commit":"004d09898a5e0e215c1bfa9ac88a413757995975"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Fscroll-slide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Fscroll-slide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Fscroll-slide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fralonra%2Fscroll-slide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fralonra","download_url":"https://codeload.github.com/fralonra/scroll-slide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960434,"owners_count":20375101,"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":["pure-javascript","scrolling"],"created_at":"2024-10-10T07:08:51.440Z","updated_at":"2025-03-19T02:31:03.011Z","avatar_url":"https://github.com/fralonra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.com/fralonra/scroll-slide.svg?branch=master)](https://travis-ci.com/fralonra/scroll-slide)\n[![npm version](https://img.shields.io/npm/v/scroll-slide.svg)](https://www.npmjs.com/package/scroll-slide)\n\n# scroll-slide\n\nFlexible and pure-js scrollable slides maker.\n\n[demo](https://fralonra.github.io/scroll-slide/demo/)\n\n# Features\n* No other requirements like jquery.\n* Can make onepage-scroll and also section-scroll.\n* Add or remove slides programatically.\n* Both scrolling and swiping are supported.\n* Keyboard supported.\n* Optional paginator.\n\n# Usage\n\nInstall the library via npm:\n```bash\nnpm install scroll-slide\n```\n\nUsage in HTML:\n```html\n\u003cscript src=\"/path/to/scroll-slide.min.js\"\u003e\u003c/script\u003e\n```\n\nOr using es6:\n```javascript\nimport Scroll from 'scroll-slide'\n```\n\n### Basic examples\n\n```javascript\nconst scroll = new Scroll({\n  viewport: document.getElementById('viewport'),\n  slides: document.querySelectorAll('#viewport section'),\n  paginator: 'right',\n  onScroll (i) {\n    alert(`This is slide ${i + 1}`)\n  }\n})\n```\n\n### Full mode\nYou can create slide which fills the entire viewport regardless of its original size by setting attribute `data-full` to 'true'.\n```html\n\u003cdiv id=\"viewport\"\u003e\n  \u003csection id=\"full\" data-full=\"true\"\u003e\n    This slide will fill the entire viewport.\n  \u003c/section\u003e\n  \u003csection id=\"nofull\"\u003e\n    This slide will keep its original size.\n  \u003c/section\u003e\n\u003c/div\u003e\n```\n\n# API\n\n## Methods\n\n### constructor(option)\nMore for `option`, see [below](#options).\n\n### add(el, index)\nAdds new element to viewport at position `index`. Push to the end by default.\n\n### current()\nReturns the index of current slide. Starts from 0.\n\n### remove(index)\nRemoves the element at position `index` in the viewport.\n\n### scrollDown()\nMoves the slide down by one. The same as scrolling down/swiping down.\n\n### scrollTo(index = 0)\nMoves to the slide at position `index`. Moves to the first slide by default.\n\n### scrollUp()\nMoves the slide up by one. The same as scrolling up/swiping up.\n\n### toggleFull(el)\nToggles full mode of an element.\n\n## Options\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| autoHeight | If true, the height of slides will be responsive to the height of window. | Boolean | true |\n| dotColor | The color for paginator dots. | String | '#e1e1e1' |\n| dotActiveColor | The color for paginator dot which is currently actived. | String | '#6687ff' |\n| duration | How long the scolling animation will last in milliseconds. | Number | 1000 |\n| idleTime | How long the browser won't respond to the scrolling action after last scrolling in millseconds. | Number | 200 |\n| loop | If the continuous loop mode to be enabled. | Boolean | true |\n| keyboard | If true, you can use up/down and pageUp/pageDown to navigate slides. | Boolean | true |\n| paginator | If 'none', there will be no paginator. If 'right'/'left', the paginator will be shown on the right/left of the viewport. | String | 'none' |\n| slides | The elements to be shown as slides in the viewport. | Array | [] |\n| viewport | The wrapper element for all slides. If you need to create a onepage-scroll website, just set viewport to fit the screen size. | Element | null |\n| onScroll | The callback function when reaches a new slide. The index of current slide will be passed. | Function | null |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffralonra%2Fscroll-slide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffralonra%2Fscroll-slide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffralonra%2Fscroll-slide/lists"}