slideshow not responding properly with clickable function

Question

I found an easy slider to show only images, that's exactly what I need but it's not working, the slider comes with two arrow icons but when I click on them; the images doesn't change.

This is what I have:

HTML:

<div id="slideshow">

    <ul class="slides">
        <li><img src="img/photos/1.jpg" width="620" height="320" alt="" />
        <li><img src="img/photos/2.jpg" width="620" height="320" alt="" /></li>
        <li><img src="img/photos/3.jpg" width="620" height="320" alt="" /></li>
        <li><img src="img/photos/4.jpg" width="620" height="320" alt="" /></li>
    </ul>

    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</div>

CSS:

*{
    margin: 0;
    padding: 0;
}

body{
    color: #eee;
    font: 13px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}

#slideshow{
    background-color: #F5F5F5;
    border: 1px solid #FFFFFF;
    height: 340px;
    margin: 190px auto 0;
    position: relative;
    width: 640px;

    -moz-box-shadow: 0 0 22px #111;
    -webkit-box-shadow: 0 0 22px #111;
    box-shadow: 0 0 22px #111;
}

#slideshow ul{
    height: 320px;
    left: 10px;
    list-style: none outside none;
    overflow: hidden;
    position: absolute;
    top: 10px;
    width: 620px;
}

#slideshow li {
    position: absolute;
    display: none;
    z-index: 10;
}

#slideshow li:first-child{
    display: block;
    z-index: 1000;
}

#slideshow .slideActive{
    z-index: 1000;
}

#slideshow canvas{
    display: none;
    position: absolute;
    z-index: 100;
}

#slideshow .arrow{
    height: 86px;
    width: 60px;
    position: absolute;
    background: url('img/arrows.png') no-repeat;
    top: 50%;
    margin-top: -43px;
    cursor: pointer;
    z-index: 5000;
}

#slideshow .previous{
    background-position: left top;left:0;
}

#slideshow .previous:hover{
    background-position: left bottom;
}

#slideshow .next{
    background-position: right top;
    right:0;
}

#slideshow .next:hover{
    background-position: right bottom;
}

AND THE JS:

$(window).load(function(){

    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){

        window.console && window.console.time && console.time('Generated In');

        if(supportCanvas){
            $('#slideshow img').each(function(){

                if(!slideshow.width){
                    // Taking the dimensions of the first image:
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }

                // Rendering the modified versions of the images:
                createCanvasOverlay(this);
            });
        }

        window.console && window.console.timeEnd && console.timeEnd('Generated In');

        $('#slideshow .arrow').click(function(){
            var li          = slides.eq(current),
                canvas      = li.find('canvas'),
                nextIndex   = 0;

            // Depending on whether this is the next or previous
            // arrow, calculate the index of the next slide accordingly.

            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }

            var next = slides.eq(nextIndex);

            if(supportCanvas){

                // This browser supports canvas, fade it into view:

                canvas.fadeIn(function(){

                    // Show the next slide below the current one:
                    next.show();
                    current = nextIndex;

                    // Fade the current slide out of view:
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {

                // This browser does not support canvas.
                // Use the plain version of the slideshow.

                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        });

    },100);

    // This function takes an image and renders
    // a version of it similar to the Overlay blending
    // mode in Photoshop.

    function createCanvasOverlay(image){

        var canvas          = document.createElement('canvas'),
            canvasContext   = canvas.getContext("2d");

        // Make it the same size as the image
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;

        // Drawing the default version of the image on the canvas:
        canvasContext.drawImage(image,0,0);


        // Taking the image data and storing it in the imageData array:
        var imageData   = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        // Loop through all the pixels in the imageData array, and modify
        // the red, green, and blue color values.

        for(var i = 0,z=data.length;i<z;i++){

            // The values for red, green and blue are consecutive elements
            // in the imageData array. We modify the three of them at once:

            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

            // After the RGB elements is the alpha value, but we leave it the same.
            ++i;
        }

        // Putting the modified imageData back to the canvas.
        canvasContext.putImageData(imageData,0,0);

        // Inserting the canvas in the DOM, before the image:
        image.parentNode.insertBefore(canvas,image);
    }

});

Answer 1

Working Plunker Example

With your code you have to find a way to set the supportCanvas value or remove that code, in the example I set it to false. Also include JQuery before you include your own script. I added the following and your code worked

supportCanvas = false;  

and

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