{"id":21734852,"url":"https://github.com/viivue/overlapping-slider","last_synced_at":"2025-03-21T00:19:29.282Z","repository":{"id":103899886,"uuid":"540352534","full_name":"viivue/overlapping-slider","owner":"viivue","description":null,"archived":false,"fork":false,"pushed_at":"2022-11-02T04:36:50.000Z","size":394,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T20:43:03.712Z","etag":null,"topics":["gsap","hammerjs","slider"],"latest_commit_sha":null,"homepage":"https://overlapping-slider.netlify.app","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/viivue.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-09-23T08:43:33.000Z","updated_at":"2022-10-07T08:58:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"d927c79a-2b86-45e5-8499-897307852ef1","html_url":"https://github.com/viivue/overlapping-slider","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":"phucbm/js-webpack-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Foverlapping-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Foverlapping-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Foverlapping-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viivue%2Foverlapping-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viivue","download_url":"https://codeload.github.com/viivue/overlapping-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244712234,"owners_count":20497465,"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":["gsap","hammerjs","slider"],"created_at":"2024-11-26T05:10:53.972Z","updated_at":"2025-03-21T00:19:29.258Z","avatar_url":"https://github.com/viivue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Overlapping Slider\n\n[![release](https://badgen.net/github/release/viivue/overlapping-slider/)](https://github.com/viivue/overlapping-slider/releases/latest)\n[![minified](https://badgen.net/badge/minified/6KB/cyan)](https://www.jsdelivr.com/package/gh/viivue/overlapping-slider)\n[![jsdelivr](https://data.jsdelivr.com/v1/package/gh/viivue/overlapping-slider/badge?style=rounded)](https://www.jsdelivr.com/package/gh/viivue/overlapping-slider)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/7f89c933-2c47-4a3f-b2ba-a32166f4f15d/deploy-status)](https://app.netlify.com/sites/overlapping-slider/deploys)\n\n\u003e Demo: https://overlapping-slider.netlify.app\n\n## Getting started\n\n### Download\n\n👉 Self hosted - [Download the latest release](https://github.com/viivue/overlapping-slider)\n\n## Initialize\n\nTo initialize an Overlapping Slider script, we have 2 ways:\n\n1. With HTML\n2. With Script\n\n### With HTML\n\nUsing these HTML attributes to initialize without JavaScript.\n\n```html\n\u003c!-- Init with HTML attribute --\u003e\n\u003cdiv data-overlapping-slider\u003e\n   \u003cdiv\u003eSlide 1\u003c/div\u003e\n   \u003cdiv\u003eSlide 2\u003c/div\u003e\n   \u003cdiv\u003eSlide 3\u003c/div\u003e\n\u003cdiv\u003e\n```\n\n### With JavaScript\n\nAssume that we have the HTML like below\n\n```html\n\u003cdiv data-overlapping-slider=\"slider-1\"\u003e\n    \u003cdiv\u003eSlide 1\u003c/div\u003e\n    \u003cdiv\u003eSlide 2\u003c/div\u003e\n    \u003cdiv\u003eSlide 3\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- You can use another attribute name --\u003e\n\u003cdiv data-custom-overlapping-slider\u003e\n    \u003cdiv\u003eSlide 1\u003c/div\u003e\n    \u003cdiv\u003eSlide 2\u003c/div\u003e\n    \u003cdiv\u003eSlide 3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\n// Init\n\n// By default, select all elements that have \"data-overlapping-slider\" attribute (default name)\nOverlappingSlider.init();\n\n// Or\n\n// Select specific element\nOverlappingSlider.init({\n    el:document.querySelector('[data-overlapping-slider=\"slider-1\"]')\n});\n\n// Or\n\n// We can get all elements that have attribute name \"data-custom-overlapping-slider\"\nOverlappingSlider.init({\n    selector: '[data-custom-overlapping-slider]'\n});\n```\n\n## Options\n\n### HTML attributes\n\nAdd these attributes on the wrapper element and always remember that setting by an attribute always override the setting\nby JS init().\n\n| Attribute                 | As for option                        | Description                                     |\n|---------------------------|--------------------------------------|-------------------------------------------------|\n| `data-os-autoplay=\"2`     | `autoplay: 2`                        | Add autoplay option through html attribute      |\n| `data-os-pause-on-hover   | `pauseOnHover: true\"`                | Enable pauseOnHover feature (only for autoplay) |\n| `data-os-swipe`           | `swipe: true`                        | Add swipe option through html attribute         |\n| `data-overlapping-slider` | `data-overlapping-slider=\"slider-1\"` | Pass an specific id for each slider             |\n\n### Attribute options\n\n### Options pass through instance\n\nAdd these attributes on the instance when init.\n\n| Attribute               | Description                                                             | \n|-------------------------|-------------------------------------------------------------------------|\n| `id: 'slider-1'`        | Assign a specific id for your slider to use Overlapping Slider methods. |\n| `swipe: true`           | Enable swipe option.                                                    |\n| `autoplay: 2`           | Enable autoplay option with 2 seconds interval.                         |\n| `pauseOnHover: true`    | Enable pauseOnHover feature (only for autoplay).                        |\n| `aspect-ratio:1280/768` | Add aspect ratio for the slider item element.                           |\n| `duration: .7`          | Add duration for each animation (second).                               | \n| `activeSlide: 0`        | The first active slide.                                                 | \n| `offsetX: 23`           | The deviation between active and normal slide (in horizontal).          | \n| `offsetY: 23`           | The deviation between active and normal slide (in vertical).            | \n| `scale: .85`            | The zoom IN/OUT value when slide change.                                | \n\n```js\n// demo\nOverlappingSlider.init({\n    el: document.querySelector('.overlapping-slider'),\n    swipe: true,\n    autoplay: 2,\n    duration: 0.7,\n    activeSlide: 1\n});\n```\n\n## Events\n\n| Name                        | Description                                   | \n|-----------------------------|-----------------------------------------------|\n| `onPause: (data) =\u003e {}`     | Fired after turning off the autoplay setting. |\n| `onPlay: (data) =\u003e {}`      | Fired after turning on the autoplay setting.  |\n| `onChange: (data,el) =\u003e {}` | Fired after changing between each slide.      |\n\n## Methods\n\n\u003e You can get **slider** from ***OverlappingSlider.get( id )***\n\n| Name       | Usage                    | Description                                             | \n|------------|--------------------------|---------------------------------------------------------|\n| `play`     | `slider.play()`          | Only for autoplay feature.                              |\n| `pause`    | `slider.pause()`         | Only for autoplay feature.                              |\n| `select`   | `slider.select(index)`   | Select any slider item                                  |\n| `previous` | `slider.previous()`      | Go to the previous slider                               |\n| `next`     | `slider.next()`          | Go to the next slider                                   |\n| `update`   | `slider.update(options)` | Pass an object to update the Overlapping Slider options |\n\nGet the instance with JS init\n\n```js\nconst options = {};\nOverlappingSlider.init(options);\n\nconst slider = OverlappingSlider.get(id); // pass your slider id\n\n// use methods\nslider.pause();\n```\n\n## Deployment\n\nRun `./web` in live server\n\n```shell\nnpm run dev\n```\n\nBuild files from `./src` to `./dist`\n\n```shell\nnpm run prod\n```\n\nBuild sources from `./web` to `./build`\n\n```shell\nnpm run build\n```\n\nBuild files from `./src` to `./dist` then publish to `npm`\n\n```shell\nnpm run publish\n```\n\n## License\n\n[MIT License](https://github.com/viivue/overlapping-slider/blob/main/LICENSE)\n\nCopyright (c) 2022 ViiVue","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviivue%2Foverlapping-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviivue%2Foverlapping-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviivue%2Foverlapping-slider/lists"}