Responsive full screen background slider using jQuery

by  
Share:
Responsive fullscreen background slider using Jquery

Last week I had received a request from my blog follower to add responsive full screen 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 full screen 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.

<script src= "js/jquery-2.1.3.min.js" ></script>
<script src="js/jquery.backstretch.min.js"></script>

To set a particular image as background add the following code.
<script type="text/javascript">
$(document).ready(function() {
     // you can also use full url 
     // like http://www.yourdomian.com/image.jpg
     $.backstretch("images/image1.jpg");

});
</script>

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.

<script type="text/javascript">
$(document).ready(function() {
     $.backstretch(["images/image2.jpg", "images/image3.jpg", "images/image4.jpg"], {duration: 1500, fade: 750});
});
</script>

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.

<input type="button" id="btn1" value="click to load image1">
<input type="button" id="btn2" value="click to load image2">

Bind the id to onclick event.
<script type="text/javascript">
$('#btn1').click(function(e) {
    e.preventDefault();
    $.backstretch("images/image3.jpg");
});

$('#btn2').click(function(e) {
    e.preventDefault();
    $.backstretch("images/image4.jpg");
});
</script>

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.

<div id="show"></div>
<script type="text/javascript">
$(document).ready(function() {
     $("#show").backstretch("images/image3.jpg");
});
</script>

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

View Demo

Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

DesignOceanside on

Awesome, simple and best of all it works well!
Thanks for sharing this plugin.
Cheers from Americana, Brazil.

Reply
nareshgoud on

please post some important examples about e-commerce websites ..

Reply
Shahrukh Khan on

Surely will try to do that.

Reply
suresh on

Awesome, simple and best of all it works well!
Thanks for sharing this plugin.
Kakinada, India

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.