There are literally thousands of sliders currently developed for you to pick from, but there are two things these sliders do very very badly. The first is that they rarely are use-able for a fullscreen website or gallery. Secondly they always, always handle the loading of those large background images badly. All examples I could find of fullscreen jQuery sliders or galleries loaded the imagery at the beginning when the slider loads. This is a terrible outcome for the user, they have to sit there staring at a blank screen while the app loads. Mobile was even worse. Also when the user clicks through the image slides they get black screens. It’s terrible UI experience and that is where this slider comes in.
Fullscreen background slider is a slider yes, but it is also far more than that, it is a way of using large beautiful background imagery, while maintaining a fluid and simple user experience, which should always be paramount!
Best way to see it in a action is to check out this demo.
Demo
As you should note, the imagery is loaded when the user clicks the thumbnails, the content for that image is loaded onto the screen while the image downloads, and you are given an indication that the image associated with this slide is still being loaded. In my opinion this is how a slider should work, and it will greatly speed up the initial loading of your site, which is a huge seo boost!
I’m currently working on the documentation but I will describe the options and set-up. Also it’s all available on github Fullscreen background slider.
Setup
$('.fullscreen-slider').fullscreenSlider();
Options
{
autoPlayState : BOOL,
autoPlayTime : INT,
alignIMG : STRING,
boundary : $(OBJECT),
startAtSlide : INT
}
- autoPlayState: BOOL- Auto play the slideshow (true || false) :: Default is false
- autoPlayTime: INT- The time between slides in seconds when auto play is set to true (1 – ?) :: Default is 4 seconds
- alignIMG: STRING- How to align the background image, defaults to center. Available (top, bottom, right, left, top_left, top_right, bottom_left, bottom_right) :: Default is ‘center’
- boundary: $(OBJECT) – The wrapper in which the slider sits, default to document as this is mean to be a fullscreen slider. :: Default is $(document)
- startAtSlide: INT – Which slide to start at (1 – ?) :: Default is 0
Public methods
var fullscreenPlugin = $('.fullscreen-slider').data('fullscreenSlider');
fullscreenPlugin.goToPrev();
fullscreenPlugin.goToNext();
fullscreenPlugin.goTo(3);
fullscreenPlugin.getCurrentSlide();
fullscreenPlugin.play();
fullscreenPlugin.stop();
- goToPrev: Go to the next slide (arguments: none)
- goToNext: Go to the previous slide (arguments: none)
- goTo: Got to the slide specified, in this case slide 3 (arguments: INT)
- getCurrentSlide: Return the current slide index or position (arguments: none)
- play: Start auto play slideshow (arguments: none)
- stop: Stop auto play slide show (arguments: none)
There are other public methods, but they require more documentation, these are the ones that control the slider. The other methods will allow you to over-ride animations and I’m still working on that 😉
Download
Enjoy!
