HR Images with inc and dec buttons

This fiddle uses div elements for left and right arrows to decrement and increment through a set of images.

by Brian von Konsky

HTML

<!-- Container holds both arrows plus the content-->
<div id="container">

    <!-- left arrow for backward in cycle goes here -->
    <div class="arrowHolder">
        <div id="left" class="arrow" onclick="decrement()"></div>
    </div>
    
    <!-- content goes here -->
    <div id="content">
        <div id='employee'>
            <p id='name'></p>
            <img id='picture' />
        </div>
    </div>
    
    <!-- righ arrow for forward in cycle goes here -->
    <div class="arrowHolder">
        <div id="right" class="arrow" onclick="increment()"></div>
    </div>
</div>

CSS

/*Container for content and arrows*/
#container {
    position: absolute;
    background: white;
    width: 100%;
    height: 250px;
}

/* class for div elements holding arrows */
.arrowHolder {
    float: left;
    width: 20%;
    height: 100%;
    background: white;
}

/* class for left and right arrows */
.arrow {
    height: 30px;
    width:  30px;
    cursor: pointer;
}

/* left arrow attributes */
#left {
    position: absolute;
    top: 50%;
    left: 20%;
    margin: -15px 0 0 -30px;
    background-image: url("http://www.bvonkonsky.com/icon/left.svg");
}

/* right arrow attributes */
#right {
    position: absolute;
    top: 50%;
    left: 80%;
    margin: -15px 0 0 0;
    background-image: url("http://www.bvonkonsky.com/icon/right.svg");
}

/* content holder */
#content  {
    float: left;
    width: 60%;
    height: 100%;
    background: darkgray;
    margin: 0px;
    padding: 0px;
}

/* employee holds the name and pic */
#employee {
    position: relative;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background-color: lightgray;

}

/* name hugs the left side */
#name {
    float: left;
    margin: 10px;
}

/* picture hugs the right side */
#picture {
    float: right;
    margin: 10px;
}

JavaScript

// Javascript defines the behaviour

// Location of images
var url = 'http://oasisapps.curtin.edu.au/staff/profile/local/images/profile/';

// List of people with images
var people = ["P.T.Dell", "John.Venable", "B.Vonkonsky"];
var index = 0;

// Update the HTML with the picture for the current index
function displayPicture() {
    var employeeName = people[index].replace(/\./g, " ");
    document.getElementById('name').innerHTML = employeeName;
    document.getElementById('picture').src = url + people[index];
}

// Decrement the index (called by pression left arrow)
function decrement() {
    index = index - 1;
    if (index < 0)
        index = people.length - 1;
    displayPicture();
}

// Increment the index (called by pressing right arrow)
function increment() {
    index = (index + 1) % people.length;
    displayPicture();
}

(function (){displayPicture();})();