Link2Twenty / L2t Paper Slider
Polymer element for displaying slides in a carousel
Stars: ✭ 53
Projects that are alternatives of or similar to L2t Paper Slider
Contactlab Ui Components
DEPRECATED - Basic UI components for ContactLab UX design pattern library
Stars: ✭ 31 (-41.51%)
Mutual labels: web-components, polymer
Vaadin Core
An evolving set of free, open source web components for building mobile and desktop web applications in modern browsers.
Stars: ✭ 382 (+620.75%)
Mutual labels: web-components, polymer
PolymerProjects
An open list of projects using Polymer
Stars: ✭ 83 (+56.6%)
Mutual labels: polymer, web-components
web-components-good-practices
😎☑️ Good Practices for build Web Components.
Stars: ✭ 80 (+50.94%)
Mutual labels: polymer, web-components
Vaadin Charts
Vaadin Charts is a feature-rich interactive graph library that answers the data visualization needs of modern web applications
Stars: ✭ 47 (-11.32%)
Mutual labels: web-components, polymer
vaadin-checkbox
The Web Component for customized checkboxes. Part of the Vaadin components.
Stars: ✭ 18 (-66.04%)
Mutual labels: polymer, web-components
Web Components Todo
A simple todo list built with various Web Components technologies
Stars: ✭ 368 (+594.34%)
Mutual labels: web-components, polymer
paper-countries
Select Dropdown with list of countries with flags and autocomplete
Stars: ✭ 16 (-69.81%)
Mutual labels: polymer, web-components
Polymer
Our original Web Component library.
Stars: ✭ 21,723 (+40886.79%)
Mutual labels: web-components, polymer
Polymer Cli
Moved to Polymer/tools monorepo
Stars: ✭ 518 (+877.36%)
Mutual labels: web-components, polymer
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (-50.94%)
Mutual labels: polymer, web-components
awesome-polymer
A collection of awesome Polymer resources.
Stars: ✭ 43 (-18.87%)
Mutual labels: polymer, web-components
TimeDoser-v2
🕑 Dosify your time (version 2, retired)
Stars: ✭ 52 (-1.89%)
Mutual labels: polymer, web-components
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-60.38%)
Mutual labels: polymer, web-components
Vaadin
An evolving set of open source web components for building mobile and desktop web applications in modern browsers.
Stars: ✭ 424 (+700%)
Mutual labels: web-components, polymer
Web Component Tester
Moved to Polymer/tools monorepo
Stars: ✭ 571 (+977.36%)
Mutual labels: web-components, polymer
< l2t-paper-slider >
Polymer element for displaying slides in a carousel. Have a quick look at the Component page
Install with bower
First you need bower, see their site for details
bower install --save l2t-paper-slider
Examples
Each slide must be within a paper-slide tag, but other than that you have complete control.
<l2t-paper-slider>
<paper-slide>#1</paper-slide>
<paper-slide>#2</paper-slide>
<paper-slide>#3</paper-slide>
<paper-slide>#4</paper-slide>
</l2t-paper-slider>
There is also auto progression and slide duration for how long it should remain on one slide
<l2t-paper-slider auto-progress slide-duration="2">
<paper-slide>#1</paper-slide>
<paper-slide>#2</paper-slide>
<paper-slide>#3</paper-slide>
</l2t-paper-slider>
You can set a different default start position, the first start postion is 0 (as opposed to 1)
<l2t-paper-slider position="1">
<paper-slide>#1</paper-slide>
<paper-slide>#2</paper-slide>
</l2t-paper-slider>
Styling
The following custom properties are available for styling:
| Custom property | Description | Default |
|---|---|---|
| --paper-slider-styles | (Mixin) Customs styles for slider container | NULL |
| --paper-slide-dot | Color of unselected Nav Dot | rgba(255, 255, 255, .5) |
| --paper-slide-dot-selected | Color of selected Nav Dot | #FFF |
| --paper-slide-width | Width of slide container | 100% |
| --paper-slide-height | Height of slide container | 600px |
| --paper-slider-dot-container-styles | (Mixin) Custom styles for dot container | NULL |
| --paper-slide-dot-styles | (Mixin) Custom styles for dot | NULL |
| --paper-slide-background | Default background color for slides | rgba(0, 0, 0, 0) |
| --paper-slide-font-size | Default font size for slide | medium |
Attributes
Public
| Attribute Name | Functionality | Type | Default |
|---|---|---|---|
| totalSlides | Number for storing total number of slides | Number | NULL |
| autoProgress | Boolean value to state if slides should auto proceed | Boolean | false |
| slideDuration | Number of seconds each slide should remain for | Number | 5 |
| hideNav | Boolean value to state if nav should should hidden | Boolean | false |
| position | Number for storing start position of slides | Number | 0 |
| disableSwipe | Boolean value to state if swipe shoud work | Boolean | false |
| sensitivity | String to storing high, low or default swipe sensitivity | String | 'default' |
Private
| Attribute Name | Functionality | Type | Default |
|---|---|---|---|
| _totalDots | Array for storing number leading up to totalSlides | Array | [] |
| _dotStyles | Object for storing all the styles of the dot elements | Object | NULL |
Methods
Public
| Method Name | Action |
|---|---|
| moveNext() | Method for moving to the next slide or back to the first slide |
| movePrev() | Method for moving to the previous slide or to the last slide |
| movePos(slide) | Method for moving to a specific slide |
Private
| Method Name | Action |
|---|---|
| _autoProceed() | Method for moving automatically ever slideDuration seconds |
| _countSlides() | Count the slides, and set totalSlides |
| _createDots(t) | Create the nav dots 1 for each slide |
| _animateCSS() | Method for styling and animating dots |
| _listenerInit() | Adds onclick listener To update the position |
| _reInit() | Method to reinitialise on totalSlides change |
| _swipeHandler(e) | Method for adding swipe event handler |
Credit
I adapted this project from Tobias Reich's project Material Slider Dots. The code is mostly his, I just made it more dynamic for a polymer enviroment.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].