HTML5, CSS3 & JS Experiments

By Martin Ivanov

Slides Viewer

X-Slides is a HTML Web Component, built on top of my CSS3 Driven Slides Viewer Without any JavaScript experiment, but now wrapped as a custom tag, and used like:

<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>

Demo

Click here to open X-Slides in a new tab.

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XSlides/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XSlides/classes/XSlides.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
<acidjs-xslides>
    <acidjs-xslides-slide>
        <h2>X-Slides HTML5 Web Component by Martin Ivanov (@wemakesitesnet)</h2>

        <p>X-Slides is a <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">HTML Web Component</a>, built on top of my 
            <a href="http://experiments.wemakesites.net/css3-slides-viewer.html" target="_blank">CSS3 Driven 
                Slides Viewer Without any JavaScript experiment</a>, 
                but now wrapped as a custom tag, and used like:</p>
<pre><code>
<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>
</code></pre>

        <p>To scroll the slides, click the blue radio buttons at the 
            top or use the arrow keys.</p>
        
        <p>Click here to <a href="http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=258">download X-Slides</a> and start using it!</p>
        
        <p>If you like this solution, you can also check my 
            <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
            <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
            <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
            <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
             follow me on <a href="https://twitter.com/#!/wemakesitesnet" target="_blank">Twitter</a> 
             or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
        <p>More info regarding this exciting new technology: 
            <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
            <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
            <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.</p>


    </acidjs-xslides-slide>
    <acidjs-xslides-slide>
        <h2>Another Slide</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
        in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
        in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </acidjs-xslides-slide>
    <acidjs-xslides-slide>
        <h2>Yet One More Slide</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
        in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
        in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
        in culpa qui officia deserunt mollit anim id est laborum.</p>
    </acidjs-xslides-slide>
</acidjs-xslides>
                
        
/*
 * Slides HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

@font-face 
{
    font-family: 'TeXGyreAdventorRegular';
    src: url('fonts/texgyreadventor-regular-webfont.eot');
    src: url('fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/texgyreadventor-regular-webfont.woff') format('woff'),
         url('fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

acidjs-xslides form,
acidjs-xslides > form > fieldset > ul > li > section,
acidjs-xslides > form > fieldset > ul > li > input,
acidjs-xslides > form > fieldset > ul > li section::before
{
    position: absolute;
}

acidjs-xslides > form > fieldset > ul > li > input,
acidjs-xslides > form > fieldset > ul > li > section
{
    opacity: 0;
}

acidjs-xslides form,
acidjs-xslides > form > fieldset > ul > li > section
{
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: 16px;
}

acidjs-xslides > form > fieldset > ul > li,
acidjs-xslides > form > fieldset > ul > li > label
{
    width: 10px;
    height: 10px;
}

acidjs-xslides,
acidjs-xslides > form > fieldset > ul > li > label,
acidjs-xslides > form > fieldset > ul > li > label::before
{
    display: block;
}

acidjs-xslides > form > fieldset > ul > li,
acidjs-xslides > form > fieldset > ul > li section::before
{
    display: inline-block;
}

acidjs-xslides > form > fieldset > ul > li > input
{
    z-index: -1;
}

acidjs-xslides > form > fieldset > ul > li > section
{
    visibility: hidden;
}

acidjs-xslides > form > fieldset > ul > li > input:checked ~ section
{
    visibility: visible;
}

acidjs-xslides > form > fieldset > ul
{
    text-align: center;
}

acidjs-xslides > form > fieldset > ul > li
{
    padding: 1px;
    margin: 1px;
}

acidjs-xslides > form > fieldset > ul > li > label
{
    height: 10px;
    border: solid 1px #3c8cd3;
    z-index: 15;
    cursor: pointer;
}

acidjs-xslides > form > fieldset > ul > li > label::before
{
    content: "";
    margin: 1px;
    height: 8px;
    width: 8px;
}

acidjs-xslides > form > fieldset > ul > li > input:checked ~ label::before,
acidjs-xslides > form > fieldset > ul > li > input:not(:checked) ~ label:hover::before
{
    background: #3c8cd3;
}

acidjs-xslides > form > fieldset > ul > li > input:not(:checked) ~ label:hover::before
{
    opacity: .6;
}

acidjs-xslides
{
    counter-reset: slide;
    font-family: TeXGyreAdventorRegular, Arial, Sans-serif;
    cursor: default;
}

acidjs-xslides form
{
    box-shadow: 0 4px 13px 5px rgba(0, 0, 0, .2), 
                0 2px 2px rgba(0, 0, 0, .15);
    background: #fff;
}

acidjs-xslides > form > fieldset > ul > li > section
{
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    
    -moz-transition: all 500ms 10ms ease-in;
    -webkit-transition: all 500ms 10ms ease-in;
    -ms-transition: all 500ms 10ms ease-in;
    -o-transition: all 500ms 10ms ease-in;
    transition: all 500ms 10ms ease-in;
}

/* slides counter */
acidjs-xslides > form > fieldset > ul > li section::before
{
    counter-increment: slide;
    content: "Slide " counter(slide);
    top: 6px;
    right: 6px;
    padding: 6px;
    font-size: 14px;
    line-height: 14px;
    background: #3c8cd3;
    color: #fff;
}

acidjs-xslides > form > fieldset > ul > li > section
{
    z-index: 5;
}

/* the slide is visible only if it's radio button is selected */
acidjs-xslides > form > fieldset > ul > li > input:checked ~ section
{
    opacity: 1;
}

acidjs-xslides::before
{
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .5);
    top: 0;
    left: 0;
}