demo/index.html

<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>bespoke-active demo</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <h1>bespoke-active</h1>

    <article>
        <section>
            <h2>Slide 1</h2>
            <p>Did you ever want someone else to keep track of what slide you're one?</p>
        </section>
        <section>
            <h2>Slide 2</h2>
            <p>Wow, me too!</p>
        </section>
        <section>
            <h2>Slide 3</h2>
            <p>Glad we have this in common, and can totally connect over it. And beer.</p>
        </section>
        <section>
            <h2>Slide 4</h2>
            <p>Ok, enought chit chat. You can use this:</p>
            <p><small>
                <code class="language-js">var slide = deck.getActiveSlide();</code>
            </small></p>
            <p><small>
                <code class="language-js">var index = deck.getActiveSlideIndex();</code>
            </small></p>
            <p>So much fun!</p>
        </section>
        <section>
            <h2>Slide 5</h2>
            <p>That's it, really. I was bored, and wanted to create a bespoke.js plugin. Enjoy!</p>
            <p><a href="https://github.com/joelpurra/bespoke-active" target="_blank">https://github.com/joelpurra/bespoke-active</a>
            </p>
            <p><a href="http://joelpurra.com/" target="_blank">joelpurra.com</a>
            </p>
        </section>
        </section>
    </article>

    <script src="../bower_components/bespoke.js/dist/bespoke.js"></script>
    <script src="../bower_components/bespoke-convenient/dist/bespoke-convenient.js"></script>
    <script src="../src/bespoke-active.js"></script>
    <script src="demo.js"></script>
</body>

</html>