How to Slide the background using jQuery-Backstretch Plugin

What Will I Learn?

You will learn how to install jQuery-Backstretch Plugin
You will learn how to use jQuery-Backstretch Plugin
You will learn how to call image using Backstretch Plugin

Requirements

Basic Knowledges about HTML
Basic Knowledges about jQuery
Provide some images for sample
You have to install or host the jQuery file, You can add jQuery CDN if you don't want to install or host it
You have to install or host the about hideshowpassword plugin, You can get it on github : https://github.com/jquery-backstretch/jquery-backstretch

Difficulty

Basic

Tutorial Contents

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes[source]

Here the simple steps to create background slider using jQuery-Backstretch Plugin:

&Download and host the jQuery-Backstretch Plugin

Download the jQuery-Backstretch Plugin on github : https://github.com/jquery-backstretch/jquery-backstretch or in its official web :
http://www.jquery-backstretch.com
Open the download folder, Move all jQuery-Backstretch file and save it on Webserver. Save it in Xampp/htdocs/ if you use XAMPP. While you use Linux create it at var/www.

&Adding Some Images

Add same images you will slide it on background and save it in the same folder of Backstretch Plugin.

&Creating PHP file.

Open your text editor.
Create new file and save as index.php. Save it on the Backstretch folder.
Add the HTML element as usual.

<html>
<head>
<title>Background Slider</title>
</head>
<body>
</body>
</html>

Create some content in the page for example

    <h2 style="color:red">BACKGROUND SLIDER</h2>
    <p style="color:white">Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized,
         slideshow-capable background image to any page or element. The image will stretch to fit the page/element, 
         and will automatically resize as the window/element size changes</p>

Because the jQuery-Backstretch Plugin is part of jQuery so to use it we need to host jquery also or you can add the CDN of jQuery if you don't want to host it. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in <head> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Include the jQuery-Backstretch Plugin

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

&Start code JS Script

To write the jQuery Script we should open <script> tag. You can put it in ,head> element or in <body> element.

<script></script>

To add Backstretch Plugin just open backstretch() function with the parameter is the images, the duration and the fade of slide. Here the format

$.backstretch(["img (1).jpg","img (2).jpg","img (3).jpg","img (4).jpg"], {duration: 1500, fade: 800});

&Testing

Save the file and run it on your localhost in browser.

&Full Code

<html>
<head>
<title>Background Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
</head>
<body>
<center>
    <h2 style="color:red">BACKGROUND SLIDER</h2>
    <p style="color:white">Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized,
         slideshow-capable background image to any page or element. The image will stretch to fit the page/element, 
         and will automatically resize as the window/element size changes</p>
</center>
<script>
    $.backstretch(["img (1).jpg","img (2).jpg","img (3).jpg","img (4).jpg"], {duration: 1500, fade: 800});
</script>
</body>
</html>

Download Full File in GDrive

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors