I’m working on my portfolio and I have a projects section. I came across this cool image slider from a hyperplexed video and I wanted to implement that as a project carousel in my portfolio.

I have gotten almost everything to work, however, the javascript function (imageSlider.js) works well for large screen sizes but doesn’t go through the entire carousel for smaller screen sizes. Especially if I add more projects, I want there to be some sort of future proofing but the longer I look at this function, the less I undrestand of it. I’m going to attatch my code but also a link to my repo since it’s public anyways. I had to do a lot of custom designing for elements but long story short you’re looking at the ProjectCarousel, ProjectCard, index.js (page 3 section), globals.css and most importantly the imageSlider.js that handles how events are managed.

The repo – Look at the ui_update2 branch.

Here’s my imageSlider.js script:

const track = document.getElementById("carousel-flexbox");

const handleOnDown = e => track.dataset.mouseDownAt = e.clientX;

const handleOnUp = () => {
    track.dataset.mouseDownAt = "0";  
    track.dataset.prevPercentage = track.dataset.percentage;
}

const handleOnMove = e => {
    if(track.dataset.mouseDownAt === "0") return;

    const mouseDelta = parseFloat(track.dataset.mouseDownAt) - e.clientX,
    maxDelta = window.innerWidth / 2;

    const percentage = (mouseDelta / maxDelta) * -100,
    nextPercentageUnconstrained = parseFloat(track.dataset.prevPercentage) + percentage,
    nextPercentage = Math.max(Math.min(nextPercentageUnconstrained, 0), -100);
    track.dataset.percentage = nextPercentage;
    track.animate({
        transform: `translate(${nextPercentage}%, -50%)`
    }, { duration: 1200, fill: "forwards" });

    for(const image of track.getElementsByClassName("img-card")) {
        image.animate({
        backgroundPosition: `${100 + nextPercentage}% center`
        }, { duration: 1200, fill: "forwards" });
    }
}

/* -- Had to add extra lines for touch events -- */

window.onmousedown = e => handleOnDown(e);

window.ontouchstart = e => handleOnDown(e.touches[0]);

window.onmouseup = e => handleOnUp(e);

window.ontouchend = e => handleOnUp(e.touches[0]);

window.onmousemove = e => handleOnMove(e);

window.ontouchmove = e => handleOnMove(e.touches[0]);

Im actually losing my mind (as javascript does to one) and I’d appreciate any help. Thanks in advance!