Image slider with JQuery not working

Question

I'm trying to implement a simple image slider by using JQuery. Here is my code:

<p id="Photos">
        <img alt="Image-1" src="../../Images/Image1.png" />
        <img alt="Image-2" src="../../Images/Image-2.png" />
        <img alt="Image-3" src="../../Images/Image-3.png" />
    </p>

<script type="text/javascript">
    $(document).ready(function () {
        SlideImage(1);
    });

    function SlideImage(currentPhoto) {
        var NumberOfPhotos = $('Photos img').length;
        currentPhoto = currentPhoto % NumberOfPhotos;

        $('Photos img').eq(currentPhoto).fadeOut(function () {
            $('Photos img').each(function (i) {
                $(this).css('zIndex', ((NumberOfPhotos - i) + currentPhoto) % NumberOfPhotos
            );
            });

            $(this).show();

            setTimeout(function () { SlideImage(++currentPhoto); }, 3000);
        });
    }
    </script>

First of all the slider is not working, showing single image constantly. Any suggestion to fix this will be highly appreciated, but more importantly I need to understand the meaning of variable 'i' used in the code, where from i getting its value & whats it's aim?

Thanks in advance.

Answer 1

i is the index of your current position in the collection of objects that you're calling "each" on. The jQuery APIs are rather good in explaining such details.

In this case I think that collection itself will be empty because instead of calling

$('Photos img').eq(currentPhoto).fadeOut(function () {

I believe you want to use

$('#Photos img').eq(currentPhoto).fadeOut(function () {

since you're attempting to address the item by its ID value