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
Install
Framework Support
Browser Compatibility
Install with
Run the above Bower command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 2.0.5
Dependencies
- polymer#^2.0.0