{"id":19832308,"url":"https://github.com/link2twenty/l2t-paper-slider","last_synced_at":"2025-05-01T16:33:20.647Z","repository":{"id":57741378,"uuid":"62058552","full_name":"Link2Twenty/l2t-paper-slider","owner":"Link2Twenty","description":"Polymer element for displaying slides in a carousel","archived":false,"fork":false,"pushed_at":"2018-06-26T19:10:19.000Z","size":2910,"stargazers_count":52,"open_issues_count":4,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-01T03:18:19.700Z","etag":null,"topics":["carousel","polymer","polymer-element","web-components"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/Link2Twenty/l2t-paper-slider","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Link2Twenty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-27T13:33:40.000Z","updated_at":"2023-08-23T14:15:40.000Z","dependencies_parsed_at":"2022-09-03T14:31:14.529Z","dependency_job_id":null,"html_url":"https://github.com/Link2Twenty/l2t-paper-slider","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Link2Twenty","download_url":"https://codeload.github.com/Link2Twenty/l2t-paper-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224268144,"owners_count":17283446,"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":["carousel","polymer","polymer-element","web-components"],"created_at":"2024-11-12T11:37:21.674Z","updated_at":"2024-11-12T11:37:22.303Z","avatar_url":"https://github.com/Link2Twenty.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-slider)\n[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-blue.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-slider)\n[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Link2Twentyl2t-paper-slider.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-slider)\n\n\n# \u003c l2t-paper-slider \u003e\n\nPolymer element for displaying slides in a carousel. \nHave a quick look at the [Component page](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-slider/l2t-paper-slider) \n\n![Screenshot](https://media.giphy.com/media/3o72Fh8f8VwsTrvSGA/giphy.gif)\n\n## Install with bower\n\nFirst you need bower, [see their site](http://bower.io/) for details \n\n```\nbower install --save l2t-paper-slider\n```\n\n## Examples\n\nEach slide must be within a paper-slide tag, but other than that you have complete control.\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cstyle is=\"custom-style\"\u003e\n      l2t-paper-slider {\n        --paper-slide-height: 200px;\n\t--paper-slide-font-size: 64px;\n      }\n      \n      paper-slide {\n        line-height: 200px;\n        text-align: center;\n        vertical-align: middle;\n\tcolor: white;\n\tbackground: tomato;\n      }\n    \u003c/style\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"l2t-paper-slider.html\"\u003e\n\t \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n  \u003cl2t-paper-slider\u003e\n    \u003cpaper-slide\u003e#1\u003c/paper-slide\u003e\n    \u003cpaper-slide\u003e#2\u003c/paper-slide\u003e\n    \u003cpaper-slide\u003e#3\u003c/paper-slide\u003e\n    \u003cpaper-slide\u003e#4\u003c/paper-slide\u003e\n  \u003c/l2t-paper-slider\u003e\n```\n  \nThere is also auto progression and slide duration for how long it should remain on one slide\n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cstyle is=\"custom-style\"\u003e\n      l2t-paper-slider {\n        --paper-slide-height: 200px;\n      }\n      \n      paper-slide {\n        line-height: 200px;\n        font-size: 64px;\n        text-align: center;\n        vertical-align: middle;\n\tcolor: white;\n\tbackground: tomato;\n      }\n    \u003c/style\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"l2t-paper-slider.html\"\u003e\n\t \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n  \u003cl2t-paper-slider auto-progress slide-duration=\"2\"\u003e\n    \u003cpaper-slide\u003e#1\u003c/paper-slide\u003e\n    \u003cpaper-slide\u003e#2\u003c/paper-slide\u003e\n    \u003cpaper-slide\u003e#3\u003c/paper-slide\u003e\n  \u003c/l2t-paper-slider\u003e\n```\n  \nYou can set a different default start position, the first start postion is 0 (as opposed to 1)\n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cstyle is=\"custom-style\"\u003e\n      l2t-paper-slider {\n        --paper-slide-height: 200px;\n      }\n      \n      paper-slide {\n        line-height: 200px;\n        font-size: 64px;\n        text-align: center;\n        vertical-align: middle;\n\tcolor: white;\n\tbackground: tomato;\n      }\n    \u003c/style\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"l2t-paper-slider.html\"\u003e\n\t \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n  \u003cl2t-paper-slider position=\"1\"\u003e\n    \u003cpaper-slide\u003e#1\u003c/paper-slide\u003e\n    \u003cpaper-slide\u003e#2\u003c/paper-slide\u003e\n  \u003c/l2t-paper-slider\u003e\n```\n  \n## Styling\n\nThe following custom properties are available for styling:\n\n| Custom property | Description | Default |\n|----------------|-------------|-------------|\n| --paper-slider-styles | (Mixin) Customs styles for slider container | NULL |\n| --paper-slide-dot | Color of unselected Nav Dot | rgba(255, 255, 255, .5) |\n| --paper-slide-dot-selected | Color of selected Nav Dot | #FFF |\n| --paper-slide-width | Width of slide container | 100% |\n| --paper-slide-height | Height of slide container | 600px |\n| --paper-slider-dot-container-styles | (Mixin) Custom styles for dot container | NULL |\n| --paper-slide-dot-styles | (Mixin) Custom styles for dot | NULL |\n| --paper-slide-background | Default background color for slides | rgba(0, 0, 0, 0) |\n| --paper-slide-font-size | Default font size for slide | medium\n\n## Attributes\n\n### Public\n\n| Attribute Name | Functionality | Type | Default |\n|----------------|-------------|-------------|-------------|\n| totalSlides | Number for storing total number of slides | Number | NULL |\n| autoProgress | Boolean value to state if slides should auto proceed | Boolean | false |\n| slideDuration | Number of seconds each slide should remain for | Number | 5 |\n| hideNav | Boolean value to state if nav should should hidden | Boolean | false |\n| position | Number for storing start position of slides | Number | 0 |\n| disableSwipe | Boolean value to state if swipe shoud work | Boolean | false |\n| sensitivity | String to storing high, low or default swipe sensitivity | String | 'default' |\n\n### Private\n\n| Attribute Name | Functionality | Type | Default |\n|----------------|-------------|-------------|-------------|\n| _totalDots | Array for storing number leading up to totalSlides | Array | [] |\n| _dotStyles | Object for storing all the styles of the dot elements | Object | NULL |\n\n## Methods\n\n### Public\n\n| Method Name | Action |\n|----------------|-------------|\n| moveNext() | Method for moving to the next slide or back to the first slide |\n| movePrev() | Method for moving to the previous slide or to the last slide |\n| movePos(slide) | Method for moving to a specific slide |\n\n### Private\n\n| Method Name | Action |\n|----------------|-------------|\n| _autoProceed() | Method for moving automatically ever slideDuration seconds |\n| _countSlides() | Count the slides, and set totalSlides |\n| _createDots(t) | Create the nav dots 1 for each slide |\n| _animateCSS() | Method for styling and animating dots |\n| _listenerInit() | Adds onclick listener To update the position |\n| _reInit() | Method to reinitialise on totalSlides change |\n| _swipeHandler(e) | Method for adding swipe event handler |\n\n## Credit\n\nI adapted this project from [Tobias Reich](https://github.com/electerious)'s project [Material Slider Dots](http://codepen.io/electerious/pen/JXNEPr/). The code is mostly his, I just made it more dynamic for a polymer enviroment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fl2t-paper-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flink2twenty%2Fl2t-paper-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fl2t-paper-slider/lists"}