Skip to content

London | ITP-May-2025 | Mo Muchunu | Module-Data-Groups | Sprint 3 | Slideshow #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

London | ITP-May-2025 | Mo Muchunu | Module-Data-Groups | Sprint 3 | Slideshow #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 23 additions & 12 deletions Sprint-3/slideshow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<script defer src="slideshow.js"></script>
</head>
<body>
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
<button type="button" id="backward-btn">Backwards</button>
<button type="button" id="forward-btn">Forward</button>
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slideshow</title>
<link rel="stylesheet" href="style.css" />

</head>

<body>
<h1>Image Carousel</h1>
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
<br />
<button type="button" id="auto-backward">Auto-Back</button>
<button type="button" id="backward-btn">Backwards</button>
<button type="button" id="stop">Stop</button>
<button type="button" id="forward-btn">Forward</button>
<button type="button" id="auto-forward">Auto-Forward</button>

<script defer src="slideshow.js"></script>
</body>

</html>
70 changes: 69 additions & 1 deletion Sprint-3/slideshow/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,73 @@ const images = [
"./assets/cute-cat-c.jpg",
];

let currentImageIndex = 0;
let autoScrollTimer = null; // To store the interval ID used for auto-scrolling

// Write your code here
// ---- DOM Elements ----
const imageDisplay = document.getElementById("carousel-img");
const forwardBtn = document.getElementById("forward-btn");
const backwardBtn = document.getElementById("backward-btn");
const autoForwardBtn = document.getElementById("auto-forward");
const autoBackBtn = document.getElementById("auto-backward");
const stopBtn = document.getElementById("stop");

// ----Functions ----
function showImage() {
imageDisplay.src = images[currentImageIndex];
}

function showNextImage() {
currentImageIndex = (currentImageIndex + 1) % images.length; // Increment index: go to next image and loop to first if at end
showImage(); // Update display
}

function showPreviousImage() {
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length; // Decrement index: go to previous image and loop to last if at beginning
showImage();
}

function disableAutoButtons() { // Prevent user from starting another auto-scroll while one is active
autoForwardBtn.disabled = true;
autoBackBtn.disabled = true;
}

function enableAutoButtons() { // Re-enable auto-scroll buttons to allow user to start auto-scroll again
autoForwardBtn.disabled = false;
autoBackBtn.disabled = false;
}

function stopAutoScroll() {
clearInterval(autoScrollTimer); // Stop the current auto-scroll interval
autoScrollTimer = null; // Reset timer variable
enableAutoButtons(); // Stop any ongoing auto-scroll and re-enables the auto-scroll buttons
}

function startAutoForward() {
stopAutoScroll(); // Ensure no other auto-scroll is running
disableAutoButtons(); // Prevent starting another auto-scroll
autoScrollTimer = setInterval(showNextImage, 2000); // Start scrolling images forward every 2 seconds
}

function startAutoBackward() {
stopAutoScroll(); // Stop any ongoing auto-scroll
disableAutoButtons(); // Disable buttons to prevent conflict
autoScrollTimer = setInterval(showPreviousImage, 2000); // Show previous image every 2 seconds
}

// ---- Event listeners ----
forwardBtn.addEventListener("click", () => {
stopAutoScroll(); // Stop auto mode on manual click
showNextImage(); // Move to next image
});

backwardBtn.addEventListener("click", () => {
stopAutoScroll(); // Stop auto mode on manual click
showPreviousImage();
});

autoForwardBtn.addEventListener("click", startAutoForward); // Start auto-forward scrolling
autoBackBtn.addEventListener("click", startAutoBackward); // Start auto-backward scrolling
stopBtn.addEventListener("click", stopAutoScroll);

window.addEventListener("DOMContentLoaded", showImage); // Show first image once page is fully loaded
25 changes: 24 additions & 1 deletion Sprint-3/slideshow/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,24 @@
/** Write your CSS in here **/
img {
width: 500px;
height: 400px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
object-fit: cover;
}

button {
margin: 20px;
padding: 10px 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #0056b3;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #89e5ef;
}