basic slideshow

by Eric Hynds

HTML

<ul>
    <li><img src="http://placehold.it/100x90"></li>
    <li><img src="http://placehold.it/100x90"></li>
    <li><img src="http://placehold.it/100x90"></li>
    <li><img src="http://placehold.it/100x90"></li>
    <li><img src="http://placehold.it/100x90"></li>
</ul>

CSS

ul {
    margin:20px 10px;
}

li {
    float: left;
    margin:0 5px;
}

img {
    border:1px solid #aaa;
    width:75px;
    height:65px;
}

.active img {
    -webkit-transform: scale(1.4);
    -webkit-transition: 0.25s ease-out;
    -moz-transform: scale(1.25);
    -moz-transition: 0.25s ease-out;
    margin:0 10px;
    border-color:#000;
}

JavaScript

var Slide = (function() {
    var index = 0;

    function Slide(container) {
        this.container = $(container);
        this.elems = this.container.children();
        this.init();
    }

    Slide.prototype = {
        init: function() {
            $(document).bind('keydown', $.proxy(function(event) {
                switch (event.which) {
                    case 39: //right
                        this.move( 1 );
                        break;
                    case 37: //left
                        this.move( -1 );
                        break;
                }
            }, this));
        
            // kick things off by selecting the first image
            this.move( 0 );
        },
        move: function( offset ) {
            
            // loop around 
            if( index + offset === this.elems.length ){
               index = 0;
            } else if(index + offset === -1 ) {
                index = this.elems.length - 1;
            } else {            
                index += offset;
            }
            
            this.elems.each($.proxy(function(i) {
                this[ i === index ? 'select' : 'deselect' ]( i );
            }, this));
        },

        select: function( index ) {
            this.elems.eq(index).addClass('active');
        },

        deselect: function( index ) {
            this.elems.eq(index).removeClass('active');
        }
    };

    return Slide;
})();

console.log( new Slide('ul') );