171 comments found.
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.
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
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.
You are plan upgrade plugin? I would like to see Instagram API 
Hello! I will think about it.
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.
https://www.mittensiding.com/en/products/sentryThanks!
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 https://codecanyon.net/item/backslider-fullscreen-background-image-slider/2756199/faqs/18473
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!
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.
great!
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 http://www.eroticsochi.com/ tell me why, please?
Hi,
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!
How can I set to Auto Play?
Oh, solved!
Mode was set to pagination.
Great!
Hi,
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.
Looks like I was most of the way there with my css image override. All it was missing was left: 0!important. All works as it should now!
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 – devforty8creates.com/f8c
Hi!
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($) {
$('#bs0').backslider({
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.
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!
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 – https://developers.google.com/picasa-web/ (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.
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!
Pre purachase question:
I can also use my photos in a folder?
And is possible to remove the effect on images?
Hi!
Backslider takes images from UL list. So, if you want it to display all images in pictures/ folder of your site, then you will have to create a markup like this
<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>
….
<li><img src="pictures/picX.jpg" alt="Pic" /></li>
</ul>
</div>
No, it’s not possible to remove effects at all. But, you can use for example “fade” effect with very small transition time (“effectTime” option) – 10ms. This will switch images instantly, without transition.
I do not have an index.html file and cannot further on with the installation process. Please help! Thank you.
Hi!
Check maybe you have index.php file. Otherwise you can contact your Hosting Provider and ask them what file is used for directory index for your site.
Let me know if you have any order questions!
Hi, I messaged you a little while back. There was no reply on the comments, or via posting here. Can you reply? Or if you are unable to help give me a refund as I cannot use your product.
Many thanks
Steve
Hi! Please remind me your question?
Hi I struggled a bit with set up – due to my lack of experience.
I wanted a single page to change the background from images in my directory. I changed line 17 in the html to this:
$(document).ready(function(){ $(’#bs0’).backslider({ mode: ‘timer’, effect: ‘slidefade’, photoRange: ’’, photoSource: ‘none’, centerImages: true, /flickrFeedQuery: { set: ‘72157594223783465’, nsid: ‘71865026@N00’,/ } });
The first image shows but does not change to the others.
Hope you can help.
Steve
Hello Steve!
If you want to configure flickr feed you should use this configuration
<script type="text/javascript">
$(document).ready(function(){
$('#bs0').backslider({
mode: 'timer',
effect: 'slidefade',
photoSource: 'flickrfeed',
photoRange: '',
flickrFeedQuery: {
set: '1111111111111',
nsid: '2222222@N00'
}
});
});
</script>
make sure that flickrFeedQuery option has correct values.
Hi thanks for the quick response. I do not want use flicker, just files in the directory ie – <!—ul class=”bs-slides”>
Then you just have to uncomment UL list with images and init plugin with this code
<script type="text/javascript">
$(document).ready(function(){
$('#bs0').backslider({
mode: 'pagination',
effect: 'slidefade',
effectEasing: 'easeOutCubic',
effectTime: 2000,
centerImages: true
});
});
</script>
Please see plugin documentation, “Installation” section
Slider works great! Having a small issue with it though. On first page load, the slider works great, but if you click off the page and go back to the one with the slider on it the plugin doesn’t seem to load. I have to refresh again once on the page to see the plugin. Not sure why that’s happening. I recently removed a slide, but that’s it. What am I missing? Here’s the link: http://vintagebargroup.com/locations.php
Sorry for late reply. Did you navigate between pages via Next/Previous arrows in your browser? BTW. what browser do you use?
Hi,
is there a way not to fade in the first image when the website is loaded, and show it directly without delay?
like it is now, everytime i change from page to page, first i have the black background, and after the first images is fading in.
www.bredstedt-cam.de
thanks
br
Hi! Plugin waits until all images are loaded and then shows first image. You can try to disable preload by setting “preload: false” option.
Hi, i add to bootstrap and have error on mobile view
See on: http://dworek-sikory.pl/
I fix it add:
.backslider .bs-slides img { max-width: none!important; }
Great! I was just looking into email from you.
Hello,
please do you have any idea why I have that ugly images jump before the slider loaded? -> http://simonepasqualini.it/bk-slider/
Thanks S.
Hello,
on init plugin adds “bs-preload” div which hides images that start loading in background. If backslider is initialized in footer you may see jumping images. To fix this you can do next.
1. In backslider.css set .bs-slides to be hidden
.backslider .bs-slides {
display: none;
list-style: inside none;
}
2. then in init code (that you probably have in footer) add this
$('#bs1').backslider({
...
}).find('.bs-slides').show();
