CodeCanyon

BackSlider - Fullscreen Background Image Slider

  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • United States

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

Thanks

flGravity

Hi!

yes, here they are
beforeSlide: function(){},      // before slide callback  
afterSlide: function(){},       // after slide callback  
slidesLoaded: function(){}      // slide images load callback 
Default-user

perfect, thank you.

And is it possible to have the pagination mode and run the timer mode?

flGravity

You must run backslider in “timer” mode and then call api methods to switch between slides, or play pause timer

Default-user

Can you please post some code for this as I have a feeling a lot of people would be helped by this.

I would like to have the timer mode along with the next,prev and bullets for each slide. Most sliders have this. Your help would be greatly appreciated.

Default-user

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.

flGravity

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!

Default-user

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

  • Bought between 1 and 9 items
  • France
  • Has been a member for 0-1 years

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 ?

flGravity

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

  • Bought between 100 and 499 items
  • Has been a member for 4-5 years

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!

flGravity

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.

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

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

flGravity

Hi! Please clarify what you mean.

Default-user

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

  • Bought between 100 and 499 items
  • Has been a member for 1-2 years
  • Italy

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?

flGravity

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)

  • Bought between 100 and 499 items
  • Has been a member for 4-5 years

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!

flGravity

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?

Default-user

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

Default-user

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

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

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.

flGravity

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.

Default-user

That works an absolute treat! Thank you.

  • Bought between 1 and 9 items
  • Has been a member for 3-4 years

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

flGravity

Hello! I will check this.

  • Bought between 1 and 9 items
  • Has been a member for 3-4 years

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

  • Bought between 50 and 99 items
  • Has been a member for 3-4 years

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.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

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

flGravity

Hi! Backslider does not have text captions, but you can easily create them using plugin’s callback API

Default-user

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); });

?

flGravity

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

Default-user

thnaks i m gonna try…

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years

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

flGravity

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

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years
cridoni Purchased

Hi, I need add backslider to existing design based html tables but when add only see backslider, my design not see. Can i help?

Regards,

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

When using the arrow controls for BackSlider, is there a way to make the thumbnail of the next/previous backgrounds to show under the arrows? I’m looking to do something similar to the next and previous arrows on this site http://www.ultranoir.com/en/#!/home/2/

flGravity

Well. You can use plugin’s callbacks – beforeSlide(), afterSlide() and slidesLoaded() and build such controls, however you should be confident with JS/CSS to do this.

  • Bought between 1 and 9 items
  • Has been a member for 0-1 years

Hi, I don’t want to stretch the images but they have to be fullscreen, but it doesn’t work, the images are always streching by changing the browser.

Thanx

flGravity

Hi! Sorry, but I don’t understand your problem. My plugin resizes images to fit whatever screen size you have.

by
by
by
by
by