<div id="slider" >
          <img src="https://25.media.tumblr.com/a226552f4882755c8bb3d928d5339123/tumblr_mojozrDdKn1snftoqo1_1280.jpg" alt="Joffrey Baratheon" title="Joffrey Baratheon" />
            <img src="https://24.media.tumblr.com/b7aadd3ff0c34d1202116b1b27f29aa8/tumblr_mouus4PUzJ1snftoqo1_1280.jpg" alt="Samwell Tarly" title="Samwell Tarly" />
            <img src="https://24.media.tumblr.com/e54707bdf9162a11be96df370c18a709/tumblr_mpeou1ZWff1snftoqo1_1280.jpg" alt="Sansa Stark" title="Sansa Stark" />
            <img src="https://24.media.tumblr.com/337f37af1bc2fb26098f50017e0fa532/tumblr_mojruwUznM1snftoqo1_1280.jpg" alt="John Snow" title="John Snow"/>
            <img src="https://24.media.tumblr.com/29efbbda4d44d5aba695ada2f94fade5/tumblr_moji29Re3x1snftoqo1_1280.jpg" alt="Tyrion Lannister" title="Tyrion Lannister"/>
        </div>     
   

    #slider{
        margin:0 auto;
        position:relative;
        overflow:hidden;
        width:800px;
        height:600px;
    }
    #slider img{
      width:auto;
      height:600px;
    }
    .img-wrap{
        position:absolute;
        text-align:center;
        width:100%;
    }
    .img-wrap p{
        display: none;
        position:absolute;
        top:5%;
        right:0;
        font-family: Arial sans-serif;
        font-size: 50px;
        padding:10px;
    }
    #prev, #next{
        display: block;
        position:absolute;
        width:54px;
        height:54px;
        z-index: 9999;
    }
    #prev{
        top:45%;
        left:5%;
        background: url('http://i1303.photobucket.com/albums/ag147/GeoWebDev/icons/left_zps9f011452.png') center center;
    }
    #next{
        top:45%;
        right:5%;
        background: url('http://i1303.photobucket.com/albums/ag147/GeoWebDev/icons/right_zpsafada5be.png') center center;
    }
    .nav{
        display: table;
        width:100%;
    }
    .nav a{
        margin-top: 20px;
        text-transform: uppercase;
        font-size: 20px;
        display: table-cell;
        text-align: center;
        text-decoration: none;
        color:#222;
    }
    .nav a.current{
        background-color:#222;
        color:#fff;
    }

(function($){

$.fn.jooSlider = function(options) {  
 
        var opt = {
            auto:true,
            speed:2000
        };
 
            if (options) { 
                $.extend(opt, options);
            }
            
            var container = $(this);

            var Slider  = function(){

                //===========
                // Variables
                //===========
                var block = false;                                  // Empêcher le clique multiple
                var height = container.find('img').height();             // Hauteur des images
                container.find('img').wrap('<div class="img-wrap"></div>');            
                this.imgs = container.find('.img-wrap');
                this.imgCount = (this.imgs.length) - 1;

                /* Caption */
                this.imgs.each(function(){
                    var caption = $(this).find('img').attr('title');
                    $(this).append('<p>'+caption+'</p>');
                });
                this.captions = container.find('.img-wrap').find('p');

                /* Controls */

                container.append('<div id="controls"><a href="#" id="prev"></a><a href="#" id="next"></a></div>');
                this.navNext =  $('#next');
                this.navPrev =  $('#prev');

                /* Navigation */

                container.after('<div class="nav" />');
                var nav = $(".nav");
                this.imgs.each(function(){
                    var caption = $(this).find('img').attr('title');
                    nav.append('<a href="#">'+ caption +'</a>');
                });
                this.bullets = nav.find("a");


                //==========
                // Méthodes
                //==========


                /*
                *   Méthode qui retourne l'index de la div.current
                */

                this.getCurrentIndex = function(){
                    return this.imgs.filter('.current').index();
                };

                /*
                *   Méthode qui anime le slide de haut en bas ou de bas en haut
                */

                this.goNext = function(index){

                    /* Images */
                    this.imgs.filter(".current").stop().animate({   // Monte l'image current
                        "top": -height+ "px"
                    }, function(){
                        $(this).hide();
                        $(this).find('p').hide();
                    });
                    this.imgs.removeClass("current");   // Supprime classe current
                    var cap = this.captions.eq(index);
                    this.imgs.eq(index).css({           // Monte la suivante et attribut la classe current
                        "top": height+"px"
                    }).show().stop().animate({
                        "top": "0px"
                    },function(){block=false;cap.fadeIn();}).addClass("current");

                    
                    /* Bullets */
                    this.bullets.removeClass("current").eq(index).addClass("current");

                }; //////////////////////// END GO NEXT

                this.goPrev = function(index){

                    /* Images */
                    this.imgs.filter(".current").stop().animate({ 
                        "top": height+ "px"
                        }, function(){
                            $(this).hide();
                            $(this).find('p').hide();
                            block=false;
                        });
                    this.imgs.removeClass("current");
                    var cap = this.captions.eq(index);
                    this.imgs.eq(index).css({           
                        "top": -height+"px"
                    }).show().stop().animate({
                        "top": "0px"
                    }, function(){cap.fadeIn();}).addClass("current");



                    /* Bullets */
                    this.bullets.removeClass("current").eq(index).addClass("current");

                }; //////////////////////// END GO PREV

                this.next = function(){

                    var index = this.getCurrentIndex();
                    if (index < this.imgCount) { 
                        if(block !==true){
                            this.goNext(index + 1); // Go next 
                        }
                        } else { 
                            if(block !==true){
                                this.goNext(0); // If last go first 
                            }  
                        } 
                    block = true;

                }; //////////////////////// END NEXT

                this.prev = function(){

                    var index = this.getCurrentIndex();
                    if (index > 0) { 
                        if(block !== true){
                            this.goPrev(index - 1); // Go previous 
                        } 
                        } else { 
                            if(block !== true){
                            this.goPrev(this.imgCount); // If first go last     
                            }
                        } 
                    block = true;

                }; //////////////////////// END PREV



                /*
                *   Méthode qui initialise l'objet
                */

                this.init = function(){
                    this.imgs.hide().first().addClass('current').show();
                    this.bullets.first().addClass("current");
                    this.captions.first().fadeIn();
                };

            }; // End Slider Object


            var slider = new Slider();
            slider.init();

            //==========
            //  EVENTS
            //==========

            /* Click */

            slider.navNext.click(function(e){ // Click next button
                e.preventDefault();
                clearInterval(interval);
                interval = setInterval(timer, opt.speed); 
                slider.next();
            });

            slider.navPrev.click(function(e){ // Click previous button
                e.preventDefault();
                slider.prev();
                clearInterval(interval);
                interval = setInterval(timer, opt.speed);
            });

            slider.bullets.click(function(e){  // Click numbered bullet
                e.preventDefault(); 
                var imgIndex = slider.getCurrentIndex();
                var bulletIndex = $(this).index();
                if(imgIndex < bulletIndex){
                    slider.goNext(bulletIndex);
                }else{
                    slider.goPrev(bulletIndex);
                }                
                clearInterval(interval);
                interval = setInterval(timer, opt.speed);
            });

            /* Interval */
            var interval = setInterval(timer, opt.speed);
            if(opt.auto === true){
                var timer = function(){slider.next();};
            }
            container.hover(function(){
              clearInterval(interval);
            }, function(){
              clearInterval(interval);
              interval = setInterval(timer, opt.speed);
            });


            return this;

    }; // End Plugin


})(jQuery);



$(document).ready(function(){
        $("#slider").jooSlider({
            auto:true,
            speed:4000
        });
    });