Next step with horizontal js idea

[Codemiester]

Hey friends,

I’ve been working with a horizontal scrolling idea recently and I thought it would be cool to add buttons that take you to each picture. Has anyone got any ideas on how to do this? My js so far has got me pretty close. My first block of code gets me close, but when I change the browser window size the childWidth variable doesn’t change alongside. Which means the scroll movement is out of place… It works well without changing window size…

In the second block of code, I’ve began making in roads into making the div length responsive. But I’m not sure how to feed that value into the final button click event…

Any help is greatly appreciated as always!

Code 1

// x = horizontal

// y = vertical

let browserWindowY = window.innerHeight;

let browserWindowX = window.innerWidth;

const container = document.querySelector('.wrapper');

const items = document.querySelectorAll('.item')

let childWidth = items[0].clientWidth;

function assignWindowSize() {

    container.style.width = window.innerWidth + 'px';

    container.style.height = window.innerHeight + 'px';

    items.forEach(e => e.style.width = window.innerWidth + 'px');

    items.forEach(e => e.style.height = window.innerHeight + 'px');

}

window.onresize = assignWindowSize;

// Button to next/last picture

// button selector

let nextPictureButton = document.querySelectorAll('.next-picture');

let lastPictureButton = document.querySelectorAll('.last-picture');

// starting horizontal scroll coordinate

let scrollPoint = 0;

nextPictureButton.forEach(e => e.addEventListener('click', nextPic));

lastPictureButton.forEach(e => e.addEventListener('click', lastPic));

console.log(scrollPoint)

function nextPic() {

    container.scrollLeft = scrollPoint += childWidth;

    }

function lastPic() {

    container.scrollLeft = scrollPoint -= childWidth;

}

Code 2

// x = horizontal
// y = vertical

let browserWindowY = window.innerHeight;
let browserWindowX = window.innerWidth;

const container = document.querySelector('.wrapper');
const items = document.querySelectorAll('.item')

function assignWindowSize() {
    container.style.width = window.innerWidth + 'px';
    container.style.height = window.innerHeight + 'px';
    items.forEach(e => e.style.width = window.innerWidth + 'px');
    items.forEach(e => e.style.height = window.innerHeight + 'px');

    // measure child width and feed into button click events
    let childWidthStart = 0;
    let childWidth = items[0].clientWidth;
    childWidthStart + childWidth;
    console.log(childWidthStart + childWidth)
}

window.onresize = assignWindowSize;

// Button to next/last picture

// button selector
let nextPictureButton = document.querySelectorAll('.next-picture');
let lastPictureButton = document.querySelectorAll('.last-picture');
// starting horizontal scroll coordinate
let scrollPoint = 0;

nextPictureButton.forEach(e => e.addEventListener('click', nextPic));
lastPictureButton.forEach(e => e.addEventListener('click', lastPic));


console.log(scrollPoint)

function nextPic() {
    container.scrollLeft = scrollPoint += childWidth;
    }

function lastPic() {
    container.scrollLeft = scrollPoint -= childWidth;
}

[bbsmooth]

Hey @Codemiester, happy to look at this but it would be much easier if you set us up with everything we need to test it. Either a codepen link or put the project in github.

[Codemiester]

Hey Bruce,

Cheers for the encouragement. This is it… https://codepen.io/Laurie312/pen/mdBLrJQ

[bbsmooth]

Here’s one way to approach it. Each time you resize the browser window you save off the width of the window to childWidth, which is the width of each page. If you are on page 3 and you click the forward button to go to page 4 you can think of it as starting the scroll at 0 and then scrolling right 3 full pages. So you would set scrollLeft to 3 * childWidth. If would work the same way if you are on page 5 and wanted to go backwards to page 4.

[Codemiester]

That’s great. Such a good solution. I’ll try that out tomorrow. Thank you Bruce

[Jimbalin]

Are you trying to make a carousel?

[Codemiester]

That’s one way to put it. I’m sort of messing around, trying to get used to scroll options in js. It’s started off with horizontal scroll. My task currently is a carousel type thing

[Codemiester]

I was thinking a transform translate might be a good way to introduce a carousel photo gallery. What do you think?

[Jimbalin]

Yes that is how it’s usually done in libraries. I personally have used Swiper and React-slick in the past for implementing carousels. Check them out to get a better idea of how you’d want it to function

[Codemiester]

Thats good to know @Jimbalin. Are Swiper and React-slick javascript frameworks? I can definitely see my self studying them in the future, but as always feel like I don’t have sufficient skills in the basic CSS and vanilla js…

[Jimbalin]

they are fairly popular React Libraries, here are the npm links

react-slick

swiper

It really comes down to know when to use which solution. Before working on code, I take a step back to ask myself what it is that needs to be accomplished (at a high level). After that you can consider the different solutions and how best to implement it.

There are very impressive things you can do with css (codepen has some very interesting projects). No need to get to that level since much of that could be more easily done by mixing JS and CSS.