Contact us Create app

Directory

← Back

l2t-paper-slider

Polymer element for displaying slides in a carousel

Author

Rating

Links

Popularity

<100

[ 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

Screenshot

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.

Compatibility

(Loading compatibility data...)

Last updated: 2018-01-30

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 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 #1 #2 #3 #4 ``` There is also auto progression and slide duration for how long it should remain on one slide ```html #1 #2 #3 ``` You can set a different default start position, the first start postion is 0 (as opposed to 1) ```html #1 #2 ``` ## 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

Online