Image Slider

by laustdeleuran

HTML

<script src="http://dev.ljd.dk/resources/modernizr-2.0.6.js"></script>
<div class="slider">
    <ul>
        <li><a href="#">
            <img src="http://lorempixel.com/500/200/nature/1/" alt="" />
            <div class="text">
                <strong class="title">Image title</strong>
                <span class="desc">Description or subtitle</span>
            </div>
        </a></li>
        <li><img src="http://lorempixel.com/500/200/nature/2/" alt="" /></li>
        <li><a href="#" title="Text to show on hover"><img src="http://lorempixel.com/500/200/nature/3/" alt="" /></a></li>
        <li><a href="#">
            <img src="http://lorempixel.com/500/200/nature/4/" alt="" />
            <div class="text">
                <strong class="title">Image title</strong>
                <span class="desc">Description or subtitle</span>
            </div>
        </a></li>
        <li><img src="http://lorempixel.com/500/200/nature/5/" alt="" /></li>
        <li><img src="http://lorempixel.com/500/200/nature/6/" alt="" /></li>
    </ul>
</div>

CSS

/*=RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, figure, figcaption, menu { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}ol,ul { list-style:none;}caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0;}section, article, header, footer, nav, aside, hgroup, video, figure, figcaption, menu { display:block; }
/*=GENERIC*/
body {
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:62.5%;
}

/*=IMAGESLIDER*/
.slider {
    width:500px;
    
    margin:1em auto;
    overflow:hidden;
}
.slider ul {
    float:left;
    position:relative;
}
.slider li {
    float:left;
    position:relative;
    z-index:1;
    margin-left:-100%;
}
.slider li:first-child {
    margin-left:0;   
}
.slider .prev-slide {
    z-index:2;
}
.slider .active-slide {
    z-index:3;
}
.slider ul,
.slider li,
.slider img,
.slider video,
.slider object,
.slider embed,
.slider a,
.slider .text,
.slider .title,
.slider .desc {
    display:block;
}
.slider a {
    text-decoration:none;
    color:#fff;
}
.slider .text {
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    background:#000;
    background:rgba(0,0,0,0.75);
    padding:1em;
    line-height:1.4em;
}
.slider .title {
    font-size:1.8em;
    line-height:1.4em;
}
.slider .desc {
    font-size:1.4em;
    line-height:1.4em;
}
    /*=FADE*/
    .slider.fade li {
        opacity:0;
          -o-transition:opacity 0.5s ease-out;
          -ms-transition:opacity 0.5s ease-out;
          -moz-transition:opacity 0.5s ease-out;
          -webkit-transition:opacity 0.5s ease-out;
        transition:opacity 0.5s ease-out;
    }
    .slider.fade .active-slide {
        opacity:1;
    }
    /*=SLIDE*/
    .slider.slide ul {
        width:9999px;
  ...

JavaScript

$(document).ready(function(){
    $('.slider').each(function(){
        // Set up vars
        var hasCanvas = Modernizr.canvas,
            hasOpacity = Modernizr.opacity,
            hasTransitions = Modernizr.csstransitions,
            transition = "fade",
            $container = $(this),
            $list = $container.children('ul'),
            $items = $list.children(),
            width = $container.width(),
            curSlide = 0;
        
        // Powerrrr
        $container.addClass('powered '+transition);
        $items.first().addClass('active-slide')
            
        // Set up items
        if (transition == "fade" && (!hasOpacity || !hasTransitions)) $items.not('.active-slide').css('opacity',0);
        
        // Set up slide changing function
        var getSlide = function(index){
                console.log(curSlide > index);
            if (curSlide > index) {
                $container.addClass('reverse');
            } else {
                $container.removeClass('reverse');   
            }
            $items.removeClass('prev-slide');
            $prevSlide = $($items[curSlide]).attr('class','prev-slide');
            $activeSlide = $($items[index]).attr('class','active-slide');
            if (transition == "canvas") {
            } else if (transition == "fade" && (!hasOpacity || !hasTransitions)) {
                $prevSlide.animate({'opacity':0},500);
                $activeSlide.animate({'opacity':1},500);
            } else if (transition == "slide" && hasTransitions) {
                $list.css({'margin-left':-index*width});
            } else if (transition == "slide") {
                $list.animate({'margin-left':-index*width},500);
            }
            curSlide = index;
            $($nav.children()[curSlide]).addClass('active').siblings().removeClass('active');
            return curSlide;
        }
        
        // Create navigation
        var $nav = $('<div class="nav" />');
        for (i=1; $items.length...