Sudo Slider jQuery Plugin - Captions demo

afterAnimation & beforeAnimation in docs

Usage

Include the javascripts

<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it.

<script type="text/javascript" >
    $(document).ready(function(){
        var ajaximages = [
            '../images/01.jpg',
            '../images/02.jpg',
            '../images/03.jpg',
            '../images/04.jpg',
            '../images/05.jpg'
        ];
        var imagestext = [
            'Just another beautiful sunset',
            'Mountains in the Alps',
            'Road and mountains in the Alps',
            'Behind another beautiful sunset',
            'A goat in norway',
        ];
        var sudoSlider = $("#slider").sudoSlider({
            effect: "fade",
            continuous:true,
            ajax: ajaximages,
            ajaxLoad: function(t){
                $(this)
                    .css("position","relative")
                    .append('<div class="caption" >' + imagestext[t-1] + '</div>');
            },
            beforeAnimation: function(t){ 
                $(this).children('.caption').hide();	
            },
            afterAnimation: function(t){ 
                $(this).children('.caption').slideDown(400);
            }
        });
    });
</script>

The CSS

.caption {
    position:absolute;
    bottom:0;
    left:0;
    width:700px;
    height:25px;
    text-align:center;
    color:black;
    background:white;
    background:transparent;
    background:rgba(255,255,255,0.7);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
    zoom: 1;
}

The HTML

<div id="slider" ></div>