full-page slider with captions

by Dru Dro

HTML

<div id="preload"></div>
<div class="slider">
    <div class="slider-box">
        <div class="slides">
            <div class="slide">
                <iframe src="https://player.vimeo.com/video/121886271?autoplay=0&title=0&byline=0&portrait=0&badge=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <div class="slide">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/LD08WeMBKYg" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="slide">
                <img src="http://www.10-walls.com/data_images/out/34/5000875-otkrytyy-kosmos-galaktika-zvezdy-tumannosti.jpg" width="100%"/>
            </div>
            <div class="slide">
                <iframe src='http://coub.com/embed/5gpoc' width='100%' height='100%'></iframe>
            </div>
            <div class="slide">
                <iframe width="100%" height="100%" src="http://devart.com"></iframe>
            </div>
        </div>
    </div>
    <div class="slider-nav">
        <button class="prev-slide">previous</button>
        <div class="slide-captions">
            <div class="captions"> 
                <span>Vimeo</span>
                <span>YouTube</span>
                <span>Image</span>
                <span>Coub</span>
                <span>Entire website</span>
            </div>
        </div>
        <button class="next-slide">next</button>
    </div>
</div>

CSS

* {
    font: 24px/1em sans-serif;
    color: rgba(255, 255, 255, 1);
}
body {
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}
#preload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: url(http://33.media.tumblr.com/3e9db0c2ea12acfa1f1fa28939d8feb5/tumblr_ml4bub5Yun1rl43djo1_500.gif) center center no-repeat;    
    background-color: #000;
}
.slider {
    overflow: auto;
}
.slider-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slides {
    height: 100%;
}
.slide {
    position: relative;
    float: left;
    left: 0px;
    right: 0px;
}
.slider-nav {
    overflow: auto;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    zoom: 1;
    position: relative;
    height: 100%;
}
.slide-captions {
    position: relative;
    overflow:hidden;
    float: left;
    height: 50px;
}
.slide-captions .captions {
    position: relative;
    height: 100%;
}
.slide-captions .captions span {
    position: relative;
    float: left;
    text-align: center;
    height: 50px;
    padding: 0;
    line-height: 50px;
}
.next-slide, .prev-slide {
    display: block;
    position: relative;
    float:right;
    width: 150px;
    padding: 0;
    max-width: 50%;
    height: 50px;
    background: transparent;
    outline: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-right: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
}
.prev-slide {
    float: left;
}
.next-slide:hover, .prev-slide:hover {
    color
}

JavaScript

$(function () {
    $(document).ready(function(){
    $('#preload').delay(2000).fadeOut("slow");
});
    Adjust();
    $(window).resize(Adjust);

    function Adjust() {
        var $sumS = 0,
            $sumC = 0;
        $('.slide').height($(window).height() - 52).width($('.slider').parent().width());
        $('.slides .slide').each(function () {
            $sumS += $(this).width();
        });
        $('.slides').width($sumS);
        $('.slider-box').scrollLeft(0);
        $('.slide-captions').width($('.slider-nav').width() - $('.prev-slide').width() - $('.next-slide').width() - 4);
        $('.captions span').width($('.slide-captions').width());
        $('.captions span').each(function () {
            $sumC += $(this).width();
        });
        $('.captions').width($sumC);
        $('.slide-captions').scrollLeft(0);
    }

    function Slide() {
        if ($(':animated').length) {
            return false;
        }
        var position = $('.slider-box').scrollLeft();
        position = position + $('.slide').width();
        $('.slider-box').animate({
            scrollLeft: position
        }, 300);
        if ($('.slider-box').scrollLeft() == ($('.slides').width() - $('.slider-box').width())) {
            $('.slider-box').animate({
                scrollLeft: 0
            }, 300);
        }
    }

    function captionSlide() {
        if ($('.slide-captions:animated').length) {
            return false;
        }
        var position = $('.slide-captions').scrollLeft();
        position = position + $('.captions span').width();
        $('.slide-captions').animate({
            scrollLeft: position
        }, 300);
        if ($('.slide-captions').scrollLeft() == ($('.captions').width() - $('.slide-captions').width())) {
            $('.slide-captions').animate({
                scrollLeft: 0
            }, 300);
        }
    }

    function SlideBack() {
        if ($(':animated').length) {
            return false;
        }
        var...