Image Slider

Using raw web technologies

by Greg Bowler

HTML

<h1>Jeans &amp; Style</h1>

<!-- 'ul' represents an 'unordered list' of items. -->
<ul id="imageList">
    <!-- each image is encapsulated in an 'li' or 'list item' -->
    <!-- The input defines the item's state. First one is checked. -->
    <input id="toggle-1" name="toggle" type="radio" checked />
    <li>
        <img src="http://i.imgur.com/Olfoz9Z.jpg" />
    </li>
    <input id="toggle-2" name="toggle" type="radio" />
    <li>
        <img src="http://i.imgur.com/52Lwjmv.jpg" />
    </li>
    <input id="toggle-3" name="toggle" type="radio" />
    <li>
        <img src="http://i.imgur.com/w5L2ckp.jpg" />
    </li>
</ul>

CSS

ul {
    position: relative;
    /* Remove the bullet points from the list. */
    list-style-type: none;
    margin: 0;
}
li {
    /* By default, don't show the list item. */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: ComeIn 0.5s 1;
    animation: ComeIn 0.5s 1;
}
img {
    height: 300px;
}

input {
    position: relative;
    margin-top: 320px;
    float: left;
    z-index: 100;
}

/* Only display the image following the checked input. */
input:checked + li {
    display: block;
}

@-webkit-keyframes ComeIn {
    from {
        opacity: 0;
    }
}

@keyframes ComeIn {
    from {
        opacity: 0;
    }
}

JavaScript

var speed = 5; // number of seconds to wait between transitions.

/**
 * Changes the currently viewed image state, rotates around the
 * list of images.
 */
function changeState() {
    var inputs = document.querySelectorAll("#imageList input"),
        inputLen = inputs.length,
        i;
    
    // Find and remove the checked input.
    for(i = 0; i < inputLen; i++) {
        if(inputs[i].checked) {
            inputs[i].checked = false;
            // Come out of the loop early, keeping the value of i.
            break;
        }
    }
    
    // Change the next input to checked. If the input was the last
    // one in the list, change the first one in the list to checked.
    if(i + 1 < inputLen) {
        inputs[i + 1].checked = true;
    }
    else {
        inputs[0].checked = true;
    }
    
    // Call this function again after the number of seconds elapses.
    setTimeout(changeState, speed * 1000);
}

// Call the function for the first time.
changeState();