mp-slider
mp-slider is a simple web component image slider build with Polymer 2.0
[ This description is mirrored from README.md at github.com/mpachnis/mp-slider on 2019-05-22 ]
<mp-slider>
Demo
Install the component using Bower:
$ bower install --save mp-slider
Usage
- Import Web Components' polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
- Import Custom Element:
<link rel="import" href="bower_components/mp-slider/mp-slider.html">
Start using it!
Wrap the image into a div. To add a caption to your image just include the
mp-caption
element.mp-caption
available properties:slider-header
andslide-content
.
<mp-slider controls bullets show-thumbs>
<div>
<img src="demo/images/img1.jpg" />
<mp-caption slider-header="Kung Fu Panda"
slider-content="Po and the legends of awesomeness">
</mp-caption>
</div>
<div>
<img src="demo/images/img2.jpg" />
<mp-caption slider-header="Despicable Me"></mp-caption>
</div>
<div>
<img src="demo/images/img3.jpg" />
<mp-caption slider-content="The incredible Scart"></mp-caption>
</div>
</mp-slider>
Available properties.
Properties | Description | Default |
---|---|---|
controls | show the right/left arrow button for changing slide | false |
show-thumbs | show thumbnails under the slider | false |
bullets | show a number of bullets based on image length | false |
show-pause-icon | show a pause icon in the slider (hover) | false |
Available styles.
Properties | Description |
---|---|
--caption-background | Caption's background color |
--pause-icon-background | pause icon's background color |
--pause-icon-stroke-color | pause icon's color |
--pause-icon-stroker-width | pause icon's stroke width |
Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs
License
MIT License
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#^2.0.0
- Released
- 2018-09-26
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 0.1.3
- Browser
- Browser Independent
mp-slider - Vaadin Add-on Directory
mp-slider is a simple web component image slider build with Polymer 2.0Issue tracker
Online Demo
View on GitHub
Documentation
mp-slider version 0.1.0
### Dependencies
* polymer#Polymer/polymer#^1.6.0
mp-slider version 0.1.1
### Dependencies
* polymer#Polymer/polymer#^1.6.0
mp-slider version 0.1.2
### Dependencies
* polymer#Polymer/polymer#^1.6.0
mp-slider version 0.1.3
### Dependencies
* polymer#Polymer/polymer#^1.6.0
mp-slider version 2.0.0
### Dependencies
* polymer#^2.0.0
mp-slider version 2.0.2
### Dependencies
* polymer#^2.0.0
mp-slider version 2.0.3
### Dependencies
* polymer#^2.0.0
mp-slider version 2.0.4
### Dependencies
* polymer#^2.0.0
mp-slider version 2.0.5
### Dependencies
* polymer#^2.0.0