First you need to add captions as UL list to the .backslider div (every caption corresponds to Backslider slide by its position in list)

<ul class="bs-captions">
 <li>Caption text</li>
 <li>Caption text</li>
 ...
</ul>

then to Backslider init add these two callback functions

slidesLoaded: function(){
        var active = $(this).find('.bs-slides > li:visible').index();
        $(this).find('.bs-captions > li').eq(active).show();
},
beforeSlide: function(index) {
        $(this).find('.bs-captions > li').filter(':visible').
                stop().fadeOut('fast').
        end().eq(index).
                stop().fadeIn('fast');
}

and finally add this very basic style to the head to position captions in top-left corner

<style type="text/css">
.bs-captions > li {
        display: none; position: absolute; top: 0; left: 0; z-index: 60;
}
</style>

The idea is to wrap Backslider into “backslider-wrapper” div that may have any width but retains some proportion, let’s say 16:9. Two CSS styles below will do the work

.backslider-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.backslider-wrapper  .backslider {
  position: absolute;
  height: 100%;
  width: 100%;
}

after that use following markup for backslider

<div class="backslider-wrapper">
  <div id="bs0" class="backslider">
    <ul class="bs-slides">  
            <li><img src="pictures/pic1.jpg" alt="Pic" /></li>  
            <li><img src="pictures/pic2.jpg" alt="Pic" /></li>  
            <li><img src="pictures/pic3.jpg" alt="Pic" /></li>  
            <li><img src="pictures/pic4.jpg" alt="Pic" /></li>  
    </ul>
  </div>
</div>

Here is example for timer + thumbnails configuration

<script type="text/javascript">
$(document).ready(function () {
    $('#bs0').backslider({
        mode: 'timer',
        effect: 'slidefade',
        centerImages: true,
        slidesLoaded: function () {
            var bs = $(this);
            var size = 50; // thumb size
            bs.find('.bs-slides img').each(function (p) {
                var atts = this.width > this.height ? 'height="' + size + '"' : 'width="' + size + '"';
                var thumb = '<img atts="" src="' + this.src + '" alt="" />';
                $('<a class="bs-thumbnails" href="#">' + thumb + '</a>').
                css({
                    width: size,
                    height: size
                }).click(function () {
                    bs.trigger('backslider', ['skip', p]);
                    return false;
                }).appendTo(bs.find('.bs-controls'));
            });
        }
    });
});
</script>

and here is another for timer + next/prev

<script type="text/javascript">
    $(document).ready(function(){
        $('#bs0').backslider({
            photoSource: 'none',
            mode:'timer',
            effect:'slide',
            timerDelay: 4000,
            effectTime: 2000,
            slidesLoaded: function(){
                var bs = $(this);
                $('<a class="prev-slide" href="#">Previous</a>').click(function(){     
                    bs.trigger('backslider','previous');
                }).appendTo(bs.find('.bs-controls'));
                $('<a class="next-slide" href="#">Next</a>').click(function(){     
                    bs.trigger('backslider','next');
                }).appendTo(bs.find('.bs-controls'));
        }
    });
});
</script>