From de850676e79da39aec6f1ce0400cfa94cecbd744 Mon Sep 17 00:00:00 2001 From: mattkae Date: Sun, 19 Sep 2021 16:32:15 -0400 Subject: First commit --- index.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 index.js (limited to 'index.js') diff --git a/index.js b/index.js new file mode 100644 index 0000000..4d29466 --- /dev/null +++ b/index.js @@ -0,0 +1,70 @@ + +function main() { + runCarousel(); + runPosts(); +} + +function runCarousel() { + var carouselContainer = document.getElementById("carousel"), + imageContainer = document.getElementById('image_container'), + leftButton = document.getElementById('carousel_left'), + rightButton = document.getElementById('carousel_right'); + + // Carousel logic + var carouselPosition = 0, + numImages = imageContainer.children.length; + + function onCarouselRight() { + carouselPosition = (carouselPosition + 1); + + if (carouselPosition === numImages) { + carouselPosition = 0; + } + updateCarousel(); + } + + function onCarouselLeft() { + carouselPosition = (carouselPosition - 1); + if (carouselPosition < 0) { + carouselPosition = numImages - 1; + } + updateCarousel(); + } + + function onImageClicked() { + + } + + function updateCarousel() { + var children = imageContainer.children; + for (var i = 0; i < children.length; i++) { + var image = children[i]; + if (i !== carouselPosition) { + if (i === (carouselPosition - 1) % numImages) { + image.style.opacity = 0.3; + } else if (i !== 0 && i === (carouselPosition + 1) % numImages) { + image.style.opacity = 0.3; + } else { + image.style.opacity = 0; + } + } else { + image.style.opacity = 1; + } + } + + imageContainer.style.left = 'calc(' + (-carouselPosition * 252) + 'px + 50% - 120px)'; + rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible'; + leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible'; + } + + updateCarousel(); + + leftButton.addEventListener('click', onCarouselLeft); + rightButton.addEventListener('click', onCarouselRight); +} + +function runPosts() { + +} + +main(); -- cgit v1.2.1