Spacemaids' Slide Box

Exclusive slide box used on the upcoming spacemaids.com

by Emily Humphrey

HTML

<div id="wrapper">
    
    <div class="boxes boxes-1 slide-box slide-1">
        <div class="slide-nav">
            <ul>
                <li><a href="#hc-1" class="one">&lt;</a></li>
                <li><a href="#hc-2" class="two">&gt;</a></li>
            </ul>
        </div><!-- div.box-nav -->
        
        <div class="slide-content">
            <div class="slide1 active" style="background:blue">fdfvdfv</div>
            <div class="slide2" style="background:green"></div>
            <div class="slide3" style="background:yellow"></div>
            <div class="slide4" style="background:orange"></div>
            <div class="slide5" style="background:red"></div>
        </div><!-- div.hc-box-content -->
        
    </div><!--div#hc-box -->
            
</div>

CSS

body{background:#E6E2DB;color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto;padding:0;margin:0;}div#wrapper{display:block;width:940px;margin:20px auto 0;}div.boxes{display:block;margin-bottom:20px;position:relative;background:#fbfbfb;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;float:left;}div.boxes:after{display:block;height:100%;width:100%;position:absolute;bottom:-4px;right:-4px;background:#323232;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;content:"";opacity:.05;z-index:-1;}div.boxes-4{width:220px;margin-right:20px;}div.boxes-3{width:300px;margin-right:20px;}div.boxes-2{width:460px;margin-right:20px;}div.boxes-1{width:940px;margin-right:0;}

div.slide-box{
    height:300px;
}

div.slide-nav{
    display:block;
    height:0;
    margin:0;
    padding:0;
}
div.slide-nav ul{
	margin:0;
	list-style:none;
	padding:0;
}
div.slide-nav ul li a{
	display:block;
    height:36px;
	width:32px;
	text-decoration:none;
	color:#fbfbfb;
	background:#7D569F;
    position:absolute;
    top:132px;
}
div.slide-nav ul li a.one{
    left:-46px;
}
div.slide-nav ul li a.two{
    right:-46px;
}
div.slide-content{
    display:block;
	height:100%;
    width:100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow:hidden;
    position:relative;
}
div.slide-content div{
	display:block;
	height:100%;
	width: 100%;
    position:absolute;
    z-index:1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    opacity:0;
}
div.slide-1 div.slide-content div.one,
div.slide-2 div.slide-content div.two,
div.slide-3 div.slide-content div.three,
div.slide-4 div.slide-content div.four,
div.slide-5 div.slide-content div.five{
    opacity:1;
    z-index:3 !important;
	transition: opacity .3s;
	-webkit-transition: opacity .3s;
}
div.slide-1.prev div.slide-content div.two,
div.slide-2.prev div.slide-content...

JavaScript

$(".slide-box").each(function () {
    var slide1 = true,
        slide2 = false,
        slide3 = false,
        slide4 = false,
        slide5 = false,
        slideBox = $(this),
        linkOne = $(this).find("a.one"),
        linkTwo = $(this).find("a.two");

    $(linkOne).click(function (event) {
        event.preventDefault();
        if (slide1 === true) {
            $('.slide1').addClass('out');
            $('.slide5').addClass('in');
            $('.slide1').removeClass('active');
            setTimeout(function () {
                $('.slide1').removeClass('out');
                $('.slide5').addClass('active');
                $('.slide5').removeClass('in');
            }, 300);
            slide1 = false,
            slide5 = true;
        } else if (slide5 === true) {
            $('.slide5').addClass('out');
            $('.slide4').addClass('in');
            $('.slide5').removeClass('active');
            setTimeout(function () {
                $('.slide5').removeClass('out');
                $('.slide4').addClass('active');
                $('.slide4').removeClass('in');
            }, 300);
            slide5 = false,
            slide4 = true;
        } else if (slide4 === true) {
            $('.slide4').addClass('out');
            $('.slide3').addClass('in');
            $('.slide4').removeClass('active');
            setTimeout(function () {
                $('.slide4').removeClass('out');
                $('.slide3').addClass('active');
                $('.slide3').removeClass('in');
            }, 300);
            slide4 = false,
            slide3 = true;
        } else if (slide3 === true) {
            $('.slide3').addClass('out');
            $('.slide2').addClass('in');
            $('.slide3').removeClass('active');
            setTimeout(function () {
                $('.slide3').removeClass('out');
                $('.slide2').addClass('active');
                $('.slide2').removeClass('in');
            }, 300);
          ...