npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xpertsea/paper-slider

v3.0.0

Published

Polymer element for displaying slides in a carousel

Downloads

2,057

Readme

Published on webcomponents.org Published on Vaadin  Directory Stars on vaadin.com/directory

< 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.