Skip to content
This repository has been archived by the owner on Apr 27, 2019. It is now read-only.

Latest commit

 

History

History
51 lines (41 loc) · 1.27 KB

README.md

File metadata and controls

51 lines (41 loc) · 1.27 KB
Raw

slider-polymer

A Slider web component using Polymer.js

Usage example

bower init
bower install slider-polymer --save
# open with your favourite browser!
<html>
  <head>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="bower_components/slider-polymer/index.html">
  </head>
  <body>
    <slider-component>
      <img src="http://lorempixel.com/1200/500/people/1">
      <img src="http://lorempixel.com/1200/500/people/2">
      <img src="http://lorempixel.com/1200/500/people/3">
      <img src="http://lorempixel.com/1200/500/people/4">
      <img src="http://lorempixel.com/1200/500/people/5">
    </slider-component>
  </body>
</html>

Adding a brand accent color to the slider

Just add the following to <head> or to your css file.

slider-component::shadow .accent { background-color: CUSTOM_COLOR_HERE; }

/* For the :hover effect */
slider-component::shadow .accent:hover { background-color: CUSTOM_COLOR_HERE; }

Changing the opacity

Just add the following to <head> or to your css file.

/* Base opacity */
slider-component::shadow .accent { opacity: CUSTOM_VALUE_HERE; }

/* Opacity on :hover */
slider-component::shadow .accent:hover { opacity: CUSTOM_VALUE_HERE; }