Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

NW-6 | Fikret Ellek | JS2| [TECH ED] Slideshow| WEEK-4 #226

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

NW-6 | Fikret Ellek | JS2| [TECH ED] Slideshow| WEEK-4 #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bd73e06
level 1 implemented
fikretTest Jan 28, 2024
9906166
started for level 2, buttons added ın html
fikretTest Jan 28, 2024
5fad378
autoplay functions added
fikretTest Jan 28, 2024
a0eda2e
stop autoplay function added
fikretTest Jan 28, 2024
e24b044
editted css
fikretTest Jan 28, 2024
6f8f722
when clicked on the both autoplay buttons, overlaping bug detected. F…
fikretTest Jan 28, 2024
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
6 changes: 5 additions & 1 deletion week-3/slideshow/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,16 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Image carousel</title>
<script defer src="slideshow.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
<button type="button" id="auto-backward-btn">Auto-Backwards</button>
<button type="button" id="backward-btn">Backwards</button>
<button type="button" id="stop-btn">Stop</button>
<button type="button" id="forward-btn">Forward</button>
<button type="button" id="auto-forward-btn">Auto-Forward</button>
</body>
</html>
66 changes: 62 additions & 4 deletions week-3/slideshow/slideshow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,66 @@
const images = [
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
"./assets/cute-cat-c.jpg",
"./assets/cute-cat-a.png",
"./assets/cute-cat-b.jpg",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The requirement here was to have at least 4 images!

"./assets/cute-cat-c.jpg",
];

let currentPhotoIndex = 1;

// Write your code here
const image = document.getElementById("carousel-img");

const backwardBtn = document.getElementById("backward-btn");
const forwardBtn = document.getElementById("forward-btn");

const stopBtn = document.getElementById("stop-btn");

const autoBackwardBtn = document.getElementById("auto-backward-btn");
const autoForwardBtn = document.getElementById("auto-forward-btn");

let autoPlayBackward;
let autoPlayForward;

// Write your code here

function generatePhoto() {
image.setAttribute("src", images[currentPhotoIndex]);
}

function nextPhoto() {
++currentPhotoIndex;
if (currentPhotoIndex === 3) {
currentPhotoIndex = 0;
}
generatePhoto();
}

function previousPhoto() {
--currentPhotoIndex;
if (currentPhotoIndex === -1) {
currentPhotoIndex = 2;
}
generatePhoto();
}

backwardBtn.addEventListener("click", previousPhoto);
forwardBtn.addEventListener("click", nextPhoto);

autoBackwardBtn.addEventListener("click", () => {
autoPlayBackward = setInterval(() => {
previousPhoto();
}, 1000);
clearInterval(autoPlayForward);
});

autoForwardBtn.addEventListener("click", () => {
autoPlayForward = setInterval(() => {
nextPhoto();
}, 1000);
clearInterval(autoPlayBackward);
});

stopBtn.addEventListener("click", () => {
clearInterval(autoPlayBackward);
clearInterval(autoPlayForward);
});

window.onload = generatePhoto;
6 changes: 6 additions & 0 deletions week-3/slideshow/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,7 @@
/** Write your CSS in here **/

#carousel-img {
width: auto;
height: 400px;
display: block;
}