Slides Viewer: HTML5 Web Component

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

One of my experiments with atypical uses of radio buttons I blogged about sometime ago was the CSS3 Driven Slides Viewer Without any JavaScript, and soon after it was published, became one of my most popular posts, but busy with other stuff I never took the time to extend or improve it. Until yesterday, when I decided to rework it as a HTML5 Web Component as part of my recent amusement with this new and exciting aspect of HTML5.

The result is that now users could easily create a full-blown slides viewer just by utilizing this simple markup:

[sourcecode language=”xml”]
<acidjs-xslides>
    <acidjs-xslides-slide>Slide content – simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Another slide content – simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Yet another – simple text or complex HTML</acidjs-xslides-slide>
</acidjs-xslides>
[/sourcecode]

You can check the demo and download X-Slides on my Experiments and Insight website, and if you are interested in HTML5 Web Components, X-Tags or Google Polymer, you will probably find inspiration in my other endeavours with this technology.

Categories and Tags
Links

© 2006 - 2025 Martin Ivanov