Create Your Own jQuery Slideshow Plugin

jQuery is the most popular of the JavaScript libraries, and its popularity continues to grow. Many websites have adopted jQuery for dynamic effects and is now highly used.
 
One of the big advantages of jQuery is the ability to develop custom plugins, allowing us to quickly reuse our code. Plugins are also a practical way to distribute our functions to the entire jQuery community.
 
After reading this, you will have learned how to create a plugin and you will be able to create this kind of slideshow.
 
Here is the HTML file

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <script src="custom.js"></script>

    <script>

            $(document).ready(function () {

    $('#slideshow').slide({ 'delay': 3000, 'fadeSpeed': 1000 });

    // we are sending values to slide function which is defined in plugin, setting the values and perform the operation.

});

    </script>

    <style>

        img {

            height: 500px;

            width: 500px;

            display: none;

            top: 0px;

            position: absolute;

            left: 0px;

        }

    </style>

</head>

<body>

    <div style="width: 100%; text-align: center">

        <div id="slideshow" style="width: 500px; height: 500px">

            <img src="images/1.jpg" alt="1" />

            <img src="images/2.jpg" alt="2" />

            <img src="images/3.jpg" alt="3" />

            <img src="images/4.jpg" alt="4" />

            <img src="images/5.jpg" alt="5" />

            <img src="images/6.jpg" alt="6" />

        </div>

    </div>

</body>
 
custom.js:
 

(function ($) {

    $.fn.slide = function (settings) {

        //here settings object holds the values which have been passed as a parameter

        //in the slide function 

        var config = $.extend({

            //extends function replace the default values to the passed values

            delay: null, //3000

            fadeSpeed: null //1000

        }, settings);

        //holds the values

        var obj = $(this);

        //obj stores the reference of the current object which is $("#slideshow")

        var img = obj.children('img');

        //images are in the div container having id slideshow,

        //'div' act as a parent element and all the 'img' act as his childrens

        var count = img.length

        //count will have the no. of images present in the div element

        var i = 0;

        img.eq(0).show();

        //show the first image of the div container which is at position 0

        setInterval(function () {

            //it will be called continously at given interval (after 3000ms)

            //as config.delay having assigned value 3000ms

            img.eq(i).fadeOut(config.fadeSpeed);

            //here initially value of i = 0 then the image at position 0 will be fadeOut at given fadeSpeed

            i = (i + 1 == count) ? 0 : i + 1;

            setTimeout(show, 1000); //this function will be called after 1000ms = 1sec which is used to show the next image eg. at position 1

        }, config.delay);

        function show() {

            img.eq(i).fadeIn(config.fadeSpeed); //show the image with a given fadeSpeed

        }

    }

} (jQuery));

  
In Head Section
 

jQuery slideshow plugin Head Section


Body section

 jQuery slideshow plugin Body Section


custom.js

 

 jQuery plugin File Code

I have attached files that you can add your own creativity to and customize in your own way. Happy Learning...

Up Next
    Ebook Download
    View all
    Learn
    View all