Question

I need to create a simple horizontal scroll from a slew of pictures a friend sent me. I don’t really work much with javascript as I think that is what I need to use to accomplish this, but I wanted to ask here first to see if there was a more viable option. Here is a shell pic of what he needs:

In which the thumbnail of pics will be displayed side by side in the red to orange gradient box, where the arrows on each side shift the pics. The sorts at the top would need to change the way the pics are arranged from left to right.

I am not looking for a step by step on how to create this. I am just asking for advice on how I should go about accomplishing this. I am assuming the easiest method is maybe jQueryUI but wanted your advice – maybe it is even doable in HTML 5 now?. Thanks!

Answer 1

Make a container element that is the size you want the visible potion of your slider to be, then add a child element that can be moved around to shift what content is currently viewable:

<style>
#container {
    position : relative;/*necessary so its child can be positioned absolutely*/
    width    : 500px;
    height   : 200px;
    overflow : hidden;
}
#container ul {
    position   : absolute;
    top        : 0;
    left       : 0;
    list-style : none;
    width      : <total number of LI elements times their width, so eight LI elements would be 800>px
}
#container li {
    width : 100px;
    float : left;
}
</style>

<div id="container">
    <ul>
       <li>item 1</li>
       <li>item 2</li>
       ...
    </ul>
</div>

<script>
$(function () {
    $('#left-nav-button').on('click', function () {
        //use `.animate()` or `.css()` to move the UL element to the left (Hint: negative `left` value)
    });
    $('#right-nav-button').on('click', function () {
        //use `.animate()` or `.css()` to move the UL element to the right
    });
});
</script>

Here is a simple demo on jsfiddle: http://jsfiddle.net/qML6L/