I am trying to make a simple slide show by changing the pics in a DOM element. Here is the HTML and the JavaScript.. The pics do NOT show up What am I missing ?
here is the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<img id="pictures" style = "width:50%">
<div>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
Here is the JavaScript Part
function slideshow(){
'use strict';
let i = 0;
// array to hold the pictures
let pics = [];
pics [0] = cave.jpg;
pics [1] = creek.jpg;
pics [2] = entrance.jpg;
pics [3] = tree.jpg;
// making the pictures the dom element
document.getElementById('pictures').value = pics[i];
// make the buttons rotate through the pics
document.getElementById('forward').onclick = i++;
document.getElementById('reverse').onclick = i--;
}
window.onload = init;
Any pointers would be most appriciated.
Few things are missing in your solution, so feel free to run and inspect the code below. Also, put images in HTML at the beginning. JS code running is making sure they are changing the order. Only the middle one is passing through the window (#pictures-container) - this code works only for the odd number of images.
Here's the code that will work:
HTML (index.html)
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pictures-container">
<div id="pictures">
<img class="picture" alt="pic 1" data-id="1">
<img class="picture" alt="pic 2" data-id="2">
<img class="picture" alt="pic 3" data-id="3">
</div>
</div>
<div id="slideshow-actions">
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
CSS (css/style.css)
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
#pictures-container {
width: 110px;
height: 90px;
border: 1px solid red;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#pictures {
display: flex;
gap: 5px;
z-index: -1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.picture {
width: 100px;
height: 80px;
display: block;
padding: 5px;
background-color: #dedede;
}
.picture[data-id="1"] {
background-color: yellow;
}
.picture[data-id="2"] {
background-color: magenta;
}
#slideshow-actions {
margin-top: 15px;
}
JS (js/script.js)
function registerEvents() {
let btnReverse = document.getElementById('reverse');
let btnForward = document.getElementById('forward');
btnReverse.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let firstPic = pictures[0];
let parent = firstPic.parentElement;
parent.removeChild(firstPic);
parent.append(firstPic);
}
btnForward.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let lastPic = pictures[pictures.length - 1];
let parent = lastPic.parentElement;
parent.removeChild(lastPic);
parent.prepend(lastPic);
}
}
registerEvents();