diff options
author | mattkae <mattkae@protonmail.com> | 2021-09-19 16:32:15 -0400 |
---|---|---|
committer | mattkae <mattkae@protonmail.com> | 2021-09-19 16:32:15 -0400 |
commit | de850676e79da39aec6f1ce0400cfa94cecbd744 (patch) | |
tree | 48927e3cd3a518ddee1874df40d188cbc5112393 /index.js~ |
First commit
Diffstat (limited to 'index.js~')
-rw-r--r-- | index.js~ | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/index.js~ b/index.js~ new file mode 100644 index 0000000..1ccc88c --- /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 = 1, + 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(); |