A Pen by Rob Dodson.

index.html

<script src="http://polymer-project.org/polymer.min.js"></script>

<polymer-element name="img-slider" noscript>
  <template>
    <style>
      * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
      }
      
      #slider {
        max-width: 600px;
        text-align: center;
        margin: 0 auto;
      }
      
      #overflow {
        width: 100%;
        overflow: hidden;
      }
      
      #slides .inner {
        width: 400%;
      }
      
      #slides .inner {
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -o-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
      
        -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
      
        -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
      }
      
      #slides article {
        width: 25%;
        float: left;
      }
      
      #slide1:checked ~ #slides .inner {
        margin-left: 0;
      }
      
      #slide2:checked ~ #slides .inner {
        margin-left: -100%;
      }
      
      #slide3:checked ~ #slides .inner {
        margin-left: -200%;
      }
      
      #slide4:checked ~ #slides .inner {
        margin-left: -300%;
      }
      
      input[type="radio"] {
        display: none;
      }
      
      label {
        background: #CCC;
        display: inline-block;
        cursor: pointer;
        width: 10px;
        height: 10px;
        border-radius: 5px;
      }
      
      #slide1:checked ~ label[for="slide1"],
      #slide2:checked ~ label[for="slide2"],
      #slide3:checked ~ label[for="slide3"],
      #slide4:checked ~ label[for="slide4"] {
        background: #333;
      }
    </style>
    <div id="slider">
      <input checked="" type="radio" name="slider" id="slide1" selected="false">
      <input type="radio" name="slider" id="slide2" selected="false">
      <input type="radio" name="slider" id="slide3" selected="false">
      <input type="radio" name="slider" id="slide4" selected="false">
      <div id="slides">
        <div id="overflow">
          <div class="inner">
            <article>
              <content select="img:nth-of-type(1)"></content>
            </article>
            
            <article>
              <content select="img:nth-of-type(2)"></content>
            </article>
            
            <article>
              <content select="img:nth-of-type(3)"></content>
            </article>
            
            <article>
              <content select="img:nth-of-type(4)"></content>
            </article>      
          </div> <!-- .inner -->
        </div> <!-- #overflow -->
      </div>
      <label for="slide1"></label>
      <label for="slide2"></label>
      <label for="slide3"></label>
      <label for="slide4"></label>
    </div>
  </template>
</polymer-element>

<img-slider>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
</img-slider>

Polymer-Slider.markdown

Polymer Slider

A polymer element image slider.

Slider ported from http://csscience.com/responsiveslidercss3/

Images courtesy of my friend Eliya Selhub http://flickr.com/photos/eliya

A Pen by Rob Dodson on CodePen.

License.