Discussion on Backslider - Fullscreen Background Image Slider


flGravity supports this item


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

172 comments found.

Is there anyway with backslider to use multiple flickr sets or possibly the photostream?

No, you can configure backslider to pull images only from single photo set.

I found a workaround.. I put the images I want it to pull in an album and mark it private.

Seems to work fine.

Ah. Great!

My client updates images on his website with Backslider with picasa albums. What solutions do you propose with picasa support ending in May ?

Hello! My plugin uses Picasa api to get images from picasa albums. As I see here – (announcement) google won’t shutdown Picasa api. So your client will be able to use backslider.

but he won’t be able to update the albums

Your client will have to create new albums in Google Photos (rather than Picasa). Also from what I see Google won’t shutdown Picasa API. So if I’m correct, client will be able to use Backslider with new albums from Google Photos.

Hello there, I’m trying to build a html template to sell online. I really like your slider and wonder if I can bundle your slider with my template to sell it online. I just wanted to make sure that I don’t come with any license issues in the future, thanks.

Hi and sorry for late reply! Yes, you can use my plugin with your template. Just make sure you purchased extended license. Thanks!


I recently purchased your backslider plugin with a view to using it as a responsive slider for hero images. I’d looked around at a lot of different plugins, but yours was the only one that provided me with the flexibility I needed to create responsive images – I’d usually do this through the css background property, but I’m using srcset with your plugin.

For the most part, it’s working really nicely but I’m struggling with an issue I’ve spotted on mobile. Basically, when the slider loads, the first image displays without the textured overlay – not a massive issue because the image is 100% the width of the device. Which is perfect.

However, as the slider goes through the sequence of images each subsequent one is not 100% of the device width and it needs to be. I’ve tried wrapping it in the .backslider-wrapper div as you suggested, I’ve even tried targeting the images inside the list items with:

bs0 ul li img {

width:100%!important; height: auto!important; }

and nothing seems to be doing the trick. I’d really appreciate some advice on how to fix this, because as it stands I don’t be able to keep it if I can’t rectify this.

Thanks for your time! I can provide screenshots if needed.

Nice that you have figured this out!

Hey, I’m having a couple of new issues with the plugin now. Not quite sure what’s causing them. The js animation seems to be functioning incorrectly. I’ve checked the console and it doesn’t seem to be flagging any errors. Any advice you’ve got would be greatly appreciated!

The issues:

1 – When the slider loads, the images stay static for around 2 seconds and then shift up around 50 pixels or so.

2 – The overlay isn’t displaying – no missing file error

3 – The images don’t seem to slide downward and fade on top of one another, instead they just fade out to white and the next image just flashes onto the screen.

Here’s a link –


I checked then problem and here is what I recommend. First of all JS code to init backslider is wrapped into $.ready() function twice. Please make it look like so

jQuery(document).ready(function($) {
            mode: 'timer',
            effect: 'slidefade',  
            effectEasing: 'easeOutCubic',  
            preload: false, 
            effectTime: 2000,  
            centerImages: true,
            startSlide: 0

Also there seems to be some delay before plugin is initialized. During this time you see last image in bs-slides UL list and then it switches to first slide. The best what you can do is to set “preload: true” option.


How can I set to Auto Play?

Oh, solved! :)

Mode was set to pagination.

I have included this wonderful module on the site of his erotic club and for computers works well, but on the phone the background is not visible tell me why, please?


I think this is because you have max-width set for img. Try to reset it to defaults. Open /theme/ergo/css/backslider.css find style for .bs-slides img and add “max-width: initial;”, like so

.backslider .bs-slides img,
.backslider .bs-slides .bs-landscape {
    width: 100%;
    height: auto;
    max-width: initial;

Super! good! work! thank!

Hi, Great slider. I am using the slider to cycle a series of header images on a Tumblr template. The header is responsive, and switches to a different size image below a certain width. For example: >= 768px desktop version of header image 1 displays; <= 767px mobile version of header image 1 displays. The problem is that backslider loads and cycles ALL of the list item images in the .backslider div. I want to only cycle desktop images at certain widths, and mobile images at certain widths. Is there a way to cycle say images 1-3 in a list above 768, and images 4-6 below 768?

Hi! You can try to use two backslider instances and simply switch between them using @media queries. Unfortunately there is no way to exclude certain LI items in bs-slides.

Thanks for the quick reply! That approach worked.


Hi. can your plugin be configured to work like this page? The background is more of a top banner (not full screen), and is changed via the thumbnails located near top of page.


Sorry, link does not work.

yes it does – i just clicked it

It works now. Maybe it was something to do with internet provider.

Regarding your question. I think you can do this with backslider.

1. First what you need is to convert Backslider from fullscreen to responsive slider using this FAQ

2. Then create image map like in your example and position it on top of backslider.

3. Next link every image with click event that would trigger Backslider.skip() API method to switch to image by it’s index (see Backslider API section in documentation)

If you have any questions, please feel free to contact me again!

You are plan upgrade plugin? I would like to see Instagram API :)

Hello! I will think about it.

Is it possible to integrate this plugin with Wordpress? If yes, could you provide some info? Thanks

Hello! Backslider is jQuery plugin and it can be only integrated by adding a code to functions.php file of your theme.

I really love this slider but when it comes to chrome and safari browser full screen gets cropped right side and lower side part ( i.e / edge works fine ) how can I solve this? is it browser margin or padding problems? really neeeed your help : (

Hi! Maybe you use images with resolution that is not enough to cover flu screen. Try images with 3000×2000 px or so

I’m looking for more information or advice on how backslider can take over the screen after clicking on a button or image. Once backslider has gone full screen I’m also seeking advice on the best way to close backslider if the user wants to return to the page to view the rest of the page content.