Admittedly, my knowledge of JS is basic. I've taken a few online courses and am now trying to reverse engineer code for projects by changing things around.
I came across a JS slideshow on CodePen and made some modifications. However, the slideshow now only displays the first image without cycling, and the navigation buttons are no longer functional.
You can see what I changed in this fiddle
The JavaScript code snippet looks like this (I added another snippet in the document in case that causes any issues, as it's not included in the fiddle):
$(document).ready(function() {
/*JQuery for fade highlighting of links*/
$(".link").hover(function() {
$(this).animate({ color:'#fe57a1'}, 100);
}, function() {
$(this).animate({ color: '#fff'}, 300);
});
/*Slideshow script*/
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 can be found in the fiddle - I wasn't sure if I should include them here in the post.