Directory

← Back

mp-slider

mp-slider is a simple web component image slider build with Polymer 2.0

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/mpachnis/mp-slider on 2019-05-22 ]

Build Status Published on webcomponents.org

Published on Vaadin  Directory Stars on vaadin.com/directory

<mp-slider>

Demo

mp-slider docs & demo

Install the component using Bower:

$ bower install --save mp-slider

Usage

  1. Import Web Components' polyfill:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  1. Import Custom Element:
<link rel="import" href="bower_components/mp-slider/mp-slider.html">
  1. 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 and slide-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

Compatibility

(Loading compatibility data...)

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.0 mp-slider - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/mpachnis/mp-slider](https://github.com//mpachnis/mp-slider/blob/v2.0.5/README.md) on 2019-05-22 ]** [![Build Status](https://travis-ci.org/mpachnis/mp-slider.svg?branch=master)](https://travis-ci.org/mpachnis/mp-slider) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/mpachnis/mp-slider) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/mpachnismp-slider) [![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/mpachnismp-slider.svg)](https://vaadin.com/directory/component/mpachnismp-slider) ## <mp-slider> ## Demo [mp-slider docs & demo](https://www.webcomponents.org/element/mpachnis/mp-slider) ## Install the component using [Bower](http://bower.io/): ```bash $ bower install --save mp-slider ``` ## Usage 1. Import Web Components' polyfill: ```html ``` 2. Import Custom Element: ```html ``` 3. 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` and `slide-content`. ```html
``` 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](https://saucelabs.com) ![](http://info.saucelabs.com/rs/468-XBT-687/images/powered_by_sauce_labs_badges_white_1x.png) ## License MIT License
Online