Responsive fullscreen background slider using Jquery

3

Last week I had received a request from my blog follower to add responsive fullscreen background slider in a webpage. We can do this using html5/css3 and via jquery too. I don’t want to re invent the wheel and always try to use the best possible plugin available for that. And so I came across backstretch.js which does the job perfectly well. In this tutorial I will be explaining how to add responsive fullscreen background slider using Jquery.

View Demo

Backstretch.js jquery plugin

Backstretch.js is a simple yet powerful plugin written by Scott Robbin. It let’s you to add dynamically-resized, slideshow-capable background image to any page or element.

Adding a background image to a webpage

Add jquery library file and backstretch.js library file to the webpage. Without the jquery file the backstretch.js will not work.

To set a particular image as background add the following code.

Adding background slideshow to a webpage

In this case you have to pass an array of images and set the transition effect and the time interval between each images.

Changing images on click events

You can also change the background images on click event. Just bind the a class or an id with the click event.

Bind the id to onclick event.

Loading image to a particular element

If you want to load an image to a particular element, that can be done too. just bind the element using class/id to backstretch.

So other alternatives to backstretch.js are Supersized jquery plugin or MaxImage Jquery Plugin.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

3 Comments

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.