examples/slider/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js slider component example</title>
    <link rel="stylesheet" href="style.css">
    <script src="../../dist/vue.js"></script>
  </head>
  <body>

    <!-- template for the slider component -->
    <script type="text/x-template" id="img-slider-template">
      <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>
    </script>

    <!-- demo root element -->
    <div id="demo">
      <img-slider>
        <img src="images/rock.jpg">
        <img src="images/grooves.jpg">
        <img src="images/arch.jpg">
        <img src="images/sunset.jpg">
      </img-slider>
    </div>

    <p>
      Vue.js implements WebComponent-compliant &lt;content&gt; insertion point mechanism.
    </p>
    <p>
      Markup and CSS borrowed from <a href="http://css-tricks.com/modular-future-web-components/" target="_blank">CSS Tricks</a>, which is in turn adapted from <a href="http://csscience.com/responsiveslidercss3/" target="_blank">CSScience</a>. Images courtesy of <a href="http://www.flickr.com/photos/eliya" target="_blank">Eliya Selhub</a>
    </p>

    <script>
      // define slider component
      Vue.component('img-slider', {
        template: '#img-slider-template',
        replace: true
      })
      // boot up demo
      new Vue({
        el: '#demo'
      })
    </script>

  </body>
</html>