From 2465084be4fe15f9337a1baa5ea91ceae4ff1631 Mon Sep 17 00:00:00 2001 From: mattkae Date: Fri, 26 Aug 2022 08:51:17 -0400 Subject: Removed the carousel --- index.js | 67 ++++++---------------------------------------------------------- 1 file changed, 6 insertions(+), 61 deletions(-) (limited to 'index.js') diff --git a/index.js b/index.js index fd949b7..fa6dddd 100644 --- a/index.js +++ b/index.js @@ -3,39 +3,15 @@ function main() { var themeSelector = document.getElementById('theme_selector'); themeSelector.classList.remove('hidden'); - runCarousel(); + imageCallbacks(); } -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 imageCallbacks() { + const imageContainer = document.getElementById('image_container'); + function onImageClicked() { var background = document.createElement('div'); // - background.classList.add('carousel_image_expanded_container'); + background.classList.add('image_item_expanded_container'); var clone = this.cloneNode(true); clone.classList.add('expanded'); background.append(clone); @@ -50,44 +26,13 @@ function runCarousel() { var image = imageList[i]; image.addEventListener('click', onImageClicked); } - } - - function updateCarousel() { - var selectedChildPosition = -(carouselPosition * 240); - imageContainer.style.transform = 'translate(' + selectedChildPosition + 'px, 0)'; - for (var i = 0; i < numImages; i++) { - var image = imageList[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; - } - - image.style.pointerEvents = image.style.opacity > 0 ? 'all' : 'none'; - } - - rightButton.style.visibility = (carouselPosition === numImages - 1) ? 'hidden' : 'visible'; - leftButton.style.visibility = (carouselPosition === 0) ? 'hidden' : 'visible'; - } + } // -- Set up on image clicked var imageList = imageContainer.children, numImages = imageContainer.children.length; setImageClicked(); - updateCarousel(); - - leftButton.addEventListener('click', onCarouselLeft); - rightButton.addEventListener('click', onCarouselRight); - - // -- Fade in the container - imageContainer.style.opacity = '1'; } main(); -- cgit v1.2.1