l2t-paper-slider - Vaadin Add-on Directory

Name: l2t-paper-slider
Availability: InStock
Rating: 4.0 (131 reviews)
Author: Link2Twenty

Polymer element for displaying slides in a carousel

l2t-paper-slider - Vaadin Add-on Directory

**[ This description is mirrored from README.md at [github.com/Link2Twenty/l2t-paper-slider](https://github.com//Link2Twenty/l2t-paper-slider/blob/v2.0.4/README.md) on 2019-05-10 ]** # < l2t-paper-slider > Polymer element for displaying slides in a carousel. Have a quick look at the [Component page](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-slider/l2t-paper-slider) ![Screenshot](https://media.giphy.com/media/3o72Fh8f8VwsTrvSGA/giphy.gif) ## Install with bower First you need bower, [see their site](http://bower.io/) 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. ```html

``` There is also auto progression and slide duration for how long it should remain on one slide ```html

``` You can set a different default start position, the first start postion is 0 (as opposed to 1) ```html

``` ## 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](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.

GitHub Homepage
Issue tracker
Documentation
View on GitHub
Online Demo

l2t-paper-slider version 1.0.0
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.1
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.2
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.3
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.4
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.5
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.6
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.7
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.9
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.10
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.0.8
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.1.0
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.1.1
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.1.2
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.1.3
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.1.4
### Dependencies * polymer#Polymer/polymer#^1.2.0

l2t-paper-slider version 1.1.5
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.1.6
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.1.7
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.1.8
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.2.0
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.2.1
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.2.2
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.2.3
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0

l2t-paper-slider version 1.2.5
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert-polyfill#^0.2.3

l2t-paper-slider version 1.2.6
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.2.7
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.2.7.1
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.2.8
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.2.9
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.2.10
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.3.0
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.3.1
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.3.2
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.3.3
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.3.4
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.3.5
### Dependencies * polymer#Polymer/polymer#^1.2.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.0.0 * inert#WICG/inert#^1.1.0

l2t-paper-slider version 1.4.1
### Dependencies * polymer#Polymer/polymer#^1.9.1 || ^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.1.9 || ^2.0.0 * inert#WICG/inert#^1.1.3

l2t-paper-slider version 1.4.2
### Dependencies * polymer#Polymer/polymer#^1.9.1 || ^2.0.0 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^1.1.9 || ^2.0.0 * inert#WICG/inert#^1.1.3

l2t-paper-slider version 2.0.0
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2 * inert#WICG/inert#^1.1.3

l2t-paper-slider version 2.0.1
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2 * inert#WICG/inert#^1.1.3

l2t-paper-slider version 2.0.2
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2 * inert#WICG/inert#^1.1.3

l2t-paper-slider version V2.0.2
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2 * inert#WICG/inert#^1.1.3

l2t-paper-slider version 2.0.3
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2 * inert#WICG/inert#^1.1.3

l2t-paper-slider version 2.0.4
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2 * inert#WICG/inert#^1.1.3