flGravity

flGravity supports this item

Supported

This author's response time can be up to 5 business days.

Popular questions for this item

How to add captions to Backslider?

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>

How to convert Backslider from fullscreen to responsive slider?

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>

How to run Backslider in timer mode with thumbnails or next/prev controls?

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>

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy

by
by
by
by
by
by