}
}
// 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);
// 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;