mp-slider

by mpachnis

Demo

5 years ago

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

mp-slider docs & 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 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

Install

Link to this version

ImportedReleased 26 September 2018MIT License

Framework Support

Polymer 2.0+

Also supported:

Polymer 1 (0.1.3)

Browser Compatibility

Install with

bower install --save mpachnis/mp-slider"#2.0.5"

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