So off the bat I will admit that I only know the basics of JS. I have done a few courses online and am now looking at code for things I want to do so I can reverse engineer that code, and learn by changing things around.

I found some code for a JS slideshow on CodePen and changed some things. Only now it will only show the first image and not cycle, and the buttons to move around fail as well. 

I copied what I changed in [this fiddle](http://jsfiddle.net/gYV4R/1/)

The JS code looks like this (I included another snippet in the document in case that is a problem, the fiddle doesn't have it):

```
$(document).ready(function() {

/*JQuery for fade in highlighting of links*/
$(".link").hover(function() {
    $(this).animate({ color:'#fe57a1'}, 100);
}, function() {
    $(this).animate({ color: '#fff'}, 300);
});

/*Slide show code*/
var on = true;
var myVar = setInterval(function(){ 
    if(on) {slides()}on=true;},3000);

function slides(i) {
    document.getElementsByClassName(".slideImage")[1].style.width="0px";
    document.getElementsByClassName(".slideImage")[2].style.width="100%";
    var slide = document.getElementsByClassName(".slideImage")[0];
    document.getElementById("slide").appendChild(slide);
    if(i) {
        on = false; 
    }
}

function back_slide(i) {
    document.getElementsByClassName(".slideImage")[1].style.width="0px";
    document.getElementsByClassName(".slideImage")[0].style.width="100%";
    var slide = document.getElementsByClassName(".slideImage")[4];
    var slide2 = document.getElementsByClassName(".slideImage")[0];
    document.getElementById("slide").insertBefore(slide,slide2);
    if(i) {
        on = false; 
    }
}
});

```

The HTML and CSS is in the fiddle, I didn't know if I should include here in the post.