l2t-paper-slider
Polymer element for displaying slides in a carousel
[ This description is mirrored from README.md at github.com/Link2Twenty/l2t-paper-slider on 2019-05-10 ]
< 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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#1.9 - 2
- iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2
- inert#WICG/inert#^1.1.3
- Released
- 2018-01-30
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 1.3.5
- Browser
- Browser Independent
l2t-paper-slider - Vaadin Add-on Directory
Polymer element for displaying slides in a carouselIssue 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