</div>

<g-panel-slider selected="zing" transition="keyframe" class="g-panels g-panels-hslide">

<section name="foo" style="background: lightsteelblue;">Panel 1</section>

<section name="zonk" style="background: tomato;">Panel 2</section>

<section name="bar" style="background: beige;">Panel 3

<div>foo</div>

<div>bar</div>

<div>baz</div>

</section>

<section name="zing" style="background: silver;">Panel 4</section>

<section name="baz" style="background: whitesmoke;" class="right">Panel 5</section>

</g-panel-slider>

<script>

document.addEventListener("WebComponentsReady", function() {

panels = document.querySelector("g-panel-slider");

next = function() {

panels.next();

}

previous = function() {

panels.previous();

}

addPanel = function() {

var p = document.createElement('section');

p.style.background = 'hsla(' + Math.round(Math.random() * 360) + ', 60%, 30%, 1)';

p.textContent = 'Panel ' + ++panels.count;

panels.appendChild(p);

panels.panelAdded(p);

panels.index = panels.count;

}

panels.focus();

});

</script>

</body>

</html>