I've been trying to make a slideshow with HTML and JavaScript but it's not working and i'm getting no error. I have 2 scripts... one to put the images into the html and the other to make it a slideshow. This is JavaScript to show show the images:
var folder = "uploads/";
var img = "<img src='";
var imgStyle = "style='width:100%'";
var imgClass = "class='slide'";
$.ajax({
url : folder,
success : function (data) {
$(data).find("a").attr("href", function (i, val){
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$( "#slideshow" ).append( img + folder + val + "'" + imgClass + imgStyle + ">");
}
});
}
});The above works fine but the slideshow is the problem. With out the slideshow.js file the images show up, but once i run the slideshow javascript it makes everything invisible. Here is the code from the slideshow.js file:
var slides = document.querySelectorAll('#slideshow .slide'),
currentSlide = 0,
firstBtn = document.getElementById('one'),
secondBtn = document.getElementById('two'),
thirdBtn = document.getElementById('three');
function getAllSiblings(elem, filter) {
var sibs = [];
elem = elem.parentNode.firstChild;
do {
if (elem.nodeType === 3) continue; // text node
if (!filter || filter(elem)) sibs.push(elem);
} while (elem = elem.nextSibling)
return sibs;
}
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'slide active';
};
firstBtn.onclick = function() {
var slide = getAllSiblings(slides[0]);
slide.forEach(function(el) {
el.classList.remove('active');
});
slides[0].className = 'slide active';
var result = getAllSiblings(this);
result.forEach(function(el) {
el.classList.remove('active');
})
this.classList.add('active');
};
secondBtn.onclick = function() {
var slide = getAllSiblings(slides[1]);
slide.forEach(function(el) {
el.classList.remove('active');
});
slides[1].className = 'slide active';
var result = getAllSiblings(this);
result.forEach(function(el) {
el.classList.remove('active');
})
this.classList.add('active');
};
thirdBtn.onclick = function() {
var slide = getAllSiblings(slides[2]);
slide.forEach(function(el) {
el.classList.remove('active');
});
slides[2].className = 'slide active';
var result = getAllSiblings(this);
result.forEach(function(el) {
el.classList.remove('active');
})
this.classList.add('active');
};<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/display.js"></script>
<script defer src="js/slideshow.js"></script>
<title>Test Images</title>
</head>
<body>
<div id="slideshow">
</div>
<div class="controllers">
<span id='one' class='active'></span>
<span id='two'></span>
<span id='three'></span>
</div>
</body>
</html>Here is a code pen for the display: https://codepen.io/ksaeidnia0/pen/BaozNzP
Here is a code pen for the slideshow: https://codepen.io/ksaeidnia0/pen/ZEbOGWz
