Code

Discussion on Backslider - Fullscreen Background Image Slider

Discussion on Backslider - Fullscreen Background Image Slider

Cart 884 sales

flGravity supports this item

Supported

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

171 comments found.

Can I use this backslider on a site designed with tables?

Hello! Yes. Backslider has “fixed” position and you can put it behind actual content of your site

hi , febore i bui it, i would like to if possible (and esay) to add some text for each slider? thanks Pierre

ok but could you give me an example on how to do it if i buythe plugin..? something like :: $(document).bind(“startslide”,function(){ myfunction($.event.moveFrom); });

?

No, you should use

beforeSlide: function(slide_index){},        // before slide callback
afterSlide: function(slide_index){},        // after slide callback

plugin’s callback functions to show/hide captions based on slide_index

thnaks i m gonna try…

The support I received with this plugin was exceptional. One of the very best providers on Themeforest and the slider itself works great too :)

Thanks so much for all your help, most appreciated and highly recommended.

Hi!

The problem is, the click on “Next” or “Prev” stops the “Timer”-Mode. Either using “Timer” or “Controls” can be used, both does not work simultaneously. But, both modes simultaneously give no sense. I think, therefore, there is no problem on the slider.

Or can you implement both modes? For example, pause between slides 30 seconds, and manually switch if boring image ;-)

Sorry for the inconvenience. Ans sorry for my englisch, its not native.

Best regards, Dionisys

Hello!

First, perfekt work!! But, I have one question, I ve implement the next-prev-code-exampel from above, all ok ;-) But on IE 7/8/9, the images dont fading such in FF, they be displayed pic by pic without fading.

If I click on “next”, so the next picture slide in, but stop after 25%, waits any seconds and then slide in the next picture of the show. I hope you understand what I mean :-)

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

So my question, i’m false or is it a browser-problem?

Maybe you can help me with an answer.

Best regards, Dion

Hello! I will check this.

Is it possible to have clickeable arrows to scroll the background images as well as having them on autoplay? I’ve seen numerous sliders out there that do this.

Please see my reply to “adamr415” client a while ago. I provided JS code to add arrows in “timer” mode.

Anyway, due to so many requests, I will add this functionality to my plugin in future update.

That works an absolute treat! Thank you.

hi there.

what’s the difference between “startslide:0” and “startrandom: true”? can i use both at the same time? what does “photoRange” mean?

btw: i always get one background loaded and then it flickers black and ‘jumps’ to the next image. after that everything goes on smooth and nicely. but why is there this ‘jumping transition’ between the loading image (actually the last image in the <li />) and the first smooth background?

thanks and greetings!

Hello,

The logic is following. If “startRandom” is set to true backslider will start with random image. If it’s false backslider will start with slide that has index equal to “startSlide” option (default 0).

I need to have a look on this. Could you provide me with URL to the page with backslider?

ok, thanks. wrote you an email containing the link…

just to let you all know: this is 5 star support! ,-) all problems solved, THANKS!

Hello, how active mode: timer with mode: controls? I need to leave the mode timer function with the ability to change the images with two #div next and previous. How can I do?

Hello! This already have been discussed a while ago. You need to switch Backslider to “timer” mode (primary) and the use its API to call next/prev events. If you look previous comments I’ve even provided javascript code for this (user adamr415)

Can the images be referenced within the HTML, or do you have to reference them within the jQuery code?

Hi! Please clarify what you mean.

Don’t worry, I’ve figured it out. Great script, thanks :)

hi there.

can this slideshow autoplay in ‘pagination’ mode? it only shows the first background and stops then waitung for user interaction. i´d rather want it to slide automatically, but users should still be able to watch a certain image via pagination.

thanks!

Hi! Unfortunately there is no default preset for this. What you need to do is to run Backslider in “timer” mode and pagination implement via the plugin’s API functions.

Hi, i don’t understand how to put .bs-controls with a z-index:200; for example and why the code is not visible in the page ??? Can you help me ?

Hi, .bs-controls div is added by the plugin in runtime. You can see it in web inspector (firebug). “z-index” can be changed in backslider.css

Is there any API method for an onBefore or onAfter? I need this to sync some text within the site to the background.

Thanks

Hello? Any answer on this? If it is not possible I will have to request a refund as I would have thought this functionality to be pretty basic at this point.

Hello!

I created my plugin as site background changer for responsive designs, not as a regular slider. That’s why it comes only with basic controls. If you want any controls beyond the basic set then you’d need to use api and callbacks. Here is example how to run backslider in timer mode with prev/next controls

<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>

Hope this helps!

Thank you for the reply. This is getting me very close. Now I only need to add in support for individual bullets for each slide and an active class. I am sorry to ask, but I do believe that this would be helpful for other plugin owners.

Thanks

Update: I can change the height just fine. But if I change the width from 100% it totally disappears.

Nice script! Almost exactly what I need. However, instead of rotating/sliding a 100% width background, can I rotate a fixed width/height background (using thumbnails)? Specifically I am trying to rotate the background in this theme: http://themeforest.net/item/conversio-responsive-social-dating-landingpage/3228813

I attempted to change the width/height of the .backslider (line 18) style but it broke the entire script. Didn’t display anything.

Try to wrap .backslider into another div that has width/height set

It sort of worked, but it was top 0 left 0 aligned. I’m finding anything with auto alignment is breaking. i.e: {max-width: 980px; padding: 0px 2px 20px 2px; margin-left: auto; margin-right: auto; min-height: 400px;}

Ok I solved this. Instead of auto margins, I used a max-width and auto height. For some reason this fixed it. Works on all browsers.

Hi, Is there an option do use prev, next and play/pause controls instead of the pagination?

On preview you can switch to “controls” mode and you will have prev/next buttons. If you want additionally timer with play/pause buttons then you need to switch to “timer” mode and then use API to create next/prev controls. The API is very simple, you just need to trigger “backslider” event with jquery with respective events, like “pause”, “next” etc.. Here is available methods:
Backslider.next() -        show next slide
Backslider.previous() -    show previous slide
Backslider.skip(index) -    show slide with given ID
Backslider.pause() -        stop slideshow when plugin is in "timer" mode
Backslider.resume() -        start slideshow when plugin is in "timer" mode
Backslider.reset() -         reset timer when plugin is in "timer" mode

Hii Nice slider Can i use it without flicker or picassa i mean the image source will be @ my server Thank you in advance

Yes, you can. Flickr and Picasa are just extensions, but you can add images directly to backslider.

Hi, how can I stop the random method? Thanks for help!

Hi! My plugin does not have random method. Animation effect should be specified exactly.

Dos it work with jQuery 1.9?

Yes, I just checked and it works fine!

Hello! How can I use the mode ‘timer’ and `pagination` navigation together? Thanks for help!

<a href="#" onclick="$('#bs0').trigger('backslider',['prevoius']); return false; ">Prevoius</a>

... sorry it works! not Prevoius = it has to be previous!!! everything good,THX and have a great day!!!

Just wondering if you could help me with one small tweak… Right now when you resize the window, the left side of the image is fixed and the right side of the image gets cut off. Is there any way to flip this around so the right side of the image is fixed and the left side cuts off?

Great work by the way! This was the perfect solution for my website.

Thanks! No, unfortunately its’ not possible.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey