Hi! You will have to write some code.. Here is quick how-to.

1. You should create as many pagination bullets inside “bs-controls” div as you have slides, using this markup

<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 class="bs-controls">
<a class="bs-pagination" href="#"></a>
<a class="bs-pagination" href="#"></a>
<a class="bs-pagination" href="#"></a>
<a class="bs-pagination" href="#"></a>
</div>

</div>

or you can make this automatically with jquery on init.

2. after that you need to link every pagination bullet with the code that will switch slide. The code may look like this

$('#bs0 .bs-controls').delegate('.bs-pagination', 'click', function(){
 var n  = $('#bs0 .bs-pagination').index(this);
  $('#bs0').trigger('backslider',['skip', n]);
  $(this).addClass('bs-active').siblings('.bs-pagination').removeClass('bs-active');
});

3. finally, switch backslider mode to “timer” add afterSlide callback to change active bullet automatically. Like so

afterSlide: function(n) {
  $(this).find('.bs-pagination').removeClass('bs-active').eq(n).addClass('bs-active');
}

Hi Thank you for your reply, the only problem now is that I see two timers on the left and right from the dots, and the dots aren’t clickable… Can I PM you so you can take a look?

Yes sure!

My plugin does not allow to set any video as a background. It works only with images.

Thanks flGravity, I was just embedding the youtube vids on the same page, not trying to put them into the plugin.

But I found a solution online, just thought I’d mention it in case anyone had a similar issue. It’s an issue with some browsers creating flicking transitions, or not displaying the images properly with java script image sliders.

The solution was to add -webkit-transform: translateZ(0); to your css to the div holding the images. For whatever reason, making it 3D, without needing any 3D transforms helps it display correctly. (I’m not an expert… so I don’t know why!)

Btw, I saw above that MJNewman mentioned an issue about Firefox only loading half of each image. I also noticed this when viewing the demo with Firefox (although it works properly on my website). However, the same fix I mentioned above also solved this issue, making Firefox load the whole image properly.

Maybe you can suggest this fix to him to try, as I cannot reply to him.

Cheers!

Probably your problem has to do with such thing as redraw and layers. Anyway, I’m glad that you found solution!

A half of image? maybe you should wait until browser will load image completely.

Problem is solved! The slider works again in the updated FF(36.0) browser.

Great!

Hi!

1. to make this possible you should create some external list with thumbs and link it with backslider using plugin API. Images (src) for thumbs you can pull from backslider markup.

2. thumbs are square because they are inside of a 40×40 div with overflow: hidden. You can make them any size by setting height: auto and removing overflow.

Thanks!

Hello, please contact me privately with this question via mail form and I will try to find solution for you. Thanks!

Thanks! Do you use “startRandom” plugin option?

I set “startRandom” to “true” (I think was in one of the js files… sorry, I’m at work right now, so can’t check). But it only changes which image it starts with, but doesn’t randomize the list of images. So if there are 5 images, it might start on image 3, but the sequence will be 3,4,5,1,2 then repeats. If it randomly starts on image 5, the sequence will be 5,1,2,3,4 then repeats. So the sequence is still in the same order.

Is is supposed to randomize the order too? Maybe I need to turn something else on?

Cheers.

You are right. This option only selects which image to start with, but does not shuffle images in list.

Hi! Yes, you can use backslider as normal slider. See this FAQ http://codecanyon.net/item/backslider-fullscreen-background-image-slider/2756199/faqs/18473

Hi! I will reply you via email.

Thanks! Yes, I have such plans

Thanks for the quick reply!

I’m using Flickr Auth because Flickr Feed is limited to 20 images. Is there a way to customize the image that it pulls?

Open js/jquery.backslider.js source file find this line

method=flickr.photosets.getPhotos&extras=url_o&format=json&jsoncallback=?

and replace url_o with your image size. Possible values are url_sq, url_t, url_s, url_q, url_m, url_n, url_z, url_c, url_l, url_o

thanks!

I have re-read your first email and I see you didn’t mention about auto play. If you don’t need it, you can simply set “mode” option to “thumbnails” and then position .bs-controls div using “top|right|left|bottom” css properties.

To make a grid with thumbs you need to set some “width” for .bs-controls div what will force thumbs to flow to next line. Like if thumb is 50px wide ( plus 10px right margin), and you want to have 3 thumbs per row, then width should be 180px

Hello, here is FAQ how to add thumbs with autoplay for Backslider. Check here http://codecanyon.net/item/backslider-fullscreen-background-image-slider/2756199/faqs/21814

Thank you. And where I should set individual thumbnails please?

They are taken from large images that you use in backslider.

Hello,

1. Images resize properly. But they are landscape and when your client checks them on mobile, probably he is in portrait mode. In this situation Backslider shows only central part of image that fits into screen

2. Backslider by default has no support for captions. And I don’t know how you implemented this. You should check login of your code to see why they don’t snow in right time.

1. Yes, that is exactly the problem and probably the problem everyone on here is experiencing when they mention a photo resizing issue. Most websites now are made to be widescreen layout, which means landscape oriented photos, but there has to be a way to scale the images for portrait mode in mobile. You basically just confirmed my problem, do you not have a solution??

2. Hmm… that is weird because when I look in the code, there is code for a caption and the theme developer links to your website for accredidation on the plugin. I’m not sure what you mean by ‘check login of your code’?

1. I don’t consider this as a problem. This is a way how my plugin handles it. 2. Sorry. I meant logic of a code.

Hi! You can add my Backslider – jQuery Plugin (not WordPress plugin) to any site. You have to link js/css files to the page where Backslider should be activated.

I don’t have iPad. I tested it in Xcode iPad simulator.

I just tried it in my Xcode iPad simulator and got the same issue. if you click and drag to scroll the page, the safari browser bar minimizes on scroll and a blank area appears at the bottom of the page, just like in the screenshots I attached below. I’m testing on iOS 8. Thanks for looking into this for me.

Ok. I see no problem with my backslider plugin, as this is how mobile Safari handles page scroll. It shows blank space when you reach end of scroll. Same happens with http://codecanyon.net/item/jquery-resizable-fullscreen-gallery-plugin/1591675 this is the plugin that you refer in your initial comment.

ok! thanks for the great support

we can put the background to home page only?

Yes. You just need to link Backslider js/css files to the home page.

OK SECOND QUESTION RESOLVED , just remove the .backslider .bs-overlay css

Hello, I have replied you in email.

Yes, you can. Here is example for timer + thumbnails

$(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'));
            });
        }
    });
});

also another example for timer + next/prev if you will need

<script type="text/javascript">
    $(document).ready(function(){
        $('#bs0').backslider({
            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>

I have just prepared FAQ about running Backslider in timer mode with next/prev or thumbnails, as this seems to be quite popular question. So here it is – http://codecanyon.net/item/backslider-fullscreen-background-image-slider/2756199/faqs/21814

Thanks a lot! That solution works great and thanks also for the FAQ.

Hi! Make sure that your html theme does not set max-width: 100% for <img /> as it will prevent image scale to the size bigger than your primary image resolution.

thanks for your fast answer, I really appreciate.

I’ve take a look in my stylesheet and I’ve found a max-width. I’ve removed it and nothing has changed.

Do you have any idea? All my other backgrounds (which has no slider) on my other pages are ok. They are resizing correctly with my current stylesheet settings… :-/

.backslider .bs-slides img {
 max-width: none!important;
}