scrimba
Note at 1:56
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 1:56
AboutCommentsNotes
Note at 1:56
Expand for more info
index.js
run
preview
console
// Get HTML elements from the DOM 
const next = document.querySelector(".next");
const prev = document.querySelector(".previous");
const imgs = document.querySelectorAll(".card");
const imgNum = imgs.length;
const gallery = document.querySelector(".gallery");

// Create values for calculating image offsets
const imgOffset = 220;
var currentOffset = 0;
const OffsetLimit = (imgNum - 1) * imgOffset;


console.log(imgNum);
console.log(OffsetLimit);

// Function for next button
function nextImg() {
if (currentOffset <= 0 && currentOffset > -OffsetLimit) {
currentOffset += -220;
gallery.style.transform = `translateX(${currentOffset}px)`;
console.log(currentOffset);
}

// Disable button by changing opacity
if (currentOffset == -OffsetLimit) {
next.style.opacity = 0.3;
prev.style.opacity = 1;
}

if (currentOffset < 0){
prev.style.opacity = 1;
}
}

// Function for previous button
function prevImg() {
if (currentOffset >= -OffsetLimit && currentOffset < 0) {
currentOffset += 220;
gallery.style.transform = `translateX(${currentOffset}px)`;
console.log(currentOffset);
}
// Disable button by changing opacity
if (currentOffset == 0) {
prev.style.opacity = 0.3;
next.style.opacity = 1;
}

if (currentOffset > -OffsetLimit){
next.style.opacity = 1;
}
}

// Add click event listeners to elements
next.addEventListener("click", nextImg);
prev.addEventListener("click", prevImg);
Console
5
,
880
,
-220
,
-440
,
-660
,
-880
,
-660
,
-440
,
-220
,
0
,
-220
,
-440
,
-660
,
-880
,
-660
,
-440
,
-220
,
0
,
-220
,
-440
,
-660
,
-880
,
-660
,
-440
,
-220
,
0
,
/index.html
LIVE