diff options
Diffstat (limited to 'src/index.js')
| -rw-r--r-- | src/index.js | 58 |
1 files changed, 3 insertions, 55 deletions
diff --git a/src/index.js b/src/index.js index 4a0298d..21d0134 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ -const Flickity = require("flickity") -import "flickity/dist/flickity.min.css" +import initSlides from "./slides.js" + +initSlides() const apiKey = "m5nqOoBc4uhAba21gZdCP3z8D3JT4GPxDXL2psd52EA" console.log(apiKey) @@ -36,56 +37,3 @@ function anchorRedirect(e) { for (const a of document.querySelectorAll("footer a")) a.addEventListener("click", anchorRedirect) - -function scroll(progress) { - const normalizedProgress = progress / (1 / (flkty.cells.length-1)) - const liveSelectedIndex = Math.round(normalizedProgress) - const localizedProgress = normalizedProgress - liveSelectedIndex - - const prevSelectedCell = flkty.cells.at(liveSelectedIndex-1).element - const liveSelectedCell = flkty.cells.at(liveSelectedIndex % flkty.cells.length).element - const nextSelectedCell = flkty.cells.at((liveSelectedIndex+1) % flkty.cells.length).element - - const prevSelectedImage = prevSelectedCell.firstElementChild - const liveSelectedImage = liveSelectedCell.firstElementChild - const nextSelectedImage = nextSelectedCell.firstElementChild - - const prevMargin = prevSelectedCell.clientWidth - prevSelectedImage.clientWidth - const liveMargin = liveSelectedCell.clientWidth - liveSelectedImage.clientWidth - const nextMargin = nextSelectedCell.clientWidth - nextSelectedImage.clientWidth - - liveSelectedImage.style.marginLeft = liveMargin / 2 + "px" - nextSelectedImage.style.marginLeft = Math.max(0, Math.min(nextMargin, nextMargin * (localizedProgress))) + "px" - prevSelectedImage.style.marginLeft = prevMargin - Math.max(0, Math.min(prevMargin, prevMargin * localizedProgress * -1)) + "px" // TODO clean this -} - -var flkty = new Flickity('#slideshow-carousel', { - wrapAround: true, - prevNextButtons: false, - pageDots: false, - resize: true, -}) - -flkty.on("scroll", scroll) - - -function positionImageStatic(img) { - const i = parseInt(img.dataset.index) - if (i == flkty.selectedIndex) - img.style.marginLeft = (img.parentElement.clientWidth - img.clientWidth) / 2 + "px" - else if ((i + 1) % flkty.cells.length == flkty.selectedIndex) - img.style.marginLeft = img.parentElement.clientWidth - img.clientWidth + "px" -} - -function imageLoaded(e) { positionImageStatic(e.target) } -function initImages() { - const imgs = document.querySelectorAll("#slideshow-carousel img") - for (let i = 0; i < imgs.length; i++) { - const img = imgs[i] - img.dataset.index = i - img.addEventListener("load", imageLoaded) - if (img.complete) - positionImageStatic(img) - } -} -initImages() |
