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

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.

Install

Link to this version
ImportedReleased 08 May 2017MIT License
Framework Support
Polymer 1.0+
Also supported:
Polymer 2 (2.0.4)
Browser Compatibility
Install with
bower install --save Link2Twenty/l2t-paper-slider"#1.3.5"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - 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