Hotel Family Slider

A slider for John Q. Hammons corporate website.

by Preston Badeer

HTML

<div id="wrapper">
    <div style="background:green;"></div>
    <div style="background:blue;"></div>
    <div style="background:black;" class="left"></div>
    <div style="background:red;" class="center"></div>
    <div style="background:orange;" class="right"></div>
    <div style="background:yellow;"></div>
    <div style="background:purple;"></div>
</div>
<br />
<a href="#" id="arrowL">&lt;</a> <a href="#" id="arrowR">&gt;</a>

CSS

#wrapper{
    position:relative;
    border:1px solid gray;
    height:120px;
    width:200px;
}
#wrapper div{
    width:150px;
    height:105px;
    border:1px solid black;
    position:absolute;
    top:10px;
    z-index:0;
}

JavaScript

$('.center').css({
    'height': '115px',
    'right': '12%',
    'z-index': '2',
    'top': '0'
});
$('.left').css({
    'height': '105px',
    'right': '24%',
    'z-index': '1'
});
$('.right').css({
    'height': '105px',
    'right': '0',
    'z-index': '1'
});


$('#arrowR').click(function() {
    $('.left').prev().css({
        'z-index': '1',
        'right': '24%'
    });
    $('.right').css({
        'z-index': '0'
    }).removeClass('right');

    $('.left').animate({
        height: 115,
        top: 0,
        right: '12%'
    }, function() {
        $(this).css({
            'z-index': '2'
        });
        $('.left').removeClass('left').addClass('center').prev().addClass('left');
    });

    $('.center').animate({
        height: 105,
        top: 10,
        right: 0
    }, function() {
        $(this).css({
            'z-index': '1'
        }).removeClass('center').addClass('right');
    });
});

$('#arrowL').click(function() {
    $('.right').next().css({
        'right': '0'
    });
    $('.left').css({
        'z-index': '1'
    }).removeClass('left');

    $('.right').animate({
        height: 115,
        top: 0,
        right: '12%'
    }, function() {
        $(this).css({
            'z-index': '2'
        });
        $('.right').removeClass('right').addClass('center').next().addClass('right').css({
            'z-index': '1'
        });
    });

    $('.center').animate({
        height: 105,
        top: 10,
        right: '24%'
    }, function() {
        $(this).css({
            'z-index': '1'
        }).removeClass('center').addClass('left');
    });
});