programmatically set position of grid carousel

programming web dev
1

Horizontal scrollers are becoming popular and essential on mobile devices. Kevin Powell does a nice job building one with scroll snap in CSS.

He references the work of Adam Argyle who has done a lot with many carousel prototypes. Adam notes in his video a desire for a rotating display of images programmatically.

I created a carousel in a grid (grid-auto-flow: column;) in a div (position: absolute) inside a container div (position: relative). The carousel is populated with image URLs (potentially hundreds). Thumbnail images in a grid offers flexibility with a variable number of images. I set the CSS of the container div to position: relative and overflow-x: scroll.

After populating the carousel with images I display the same images as a Hero image programmatically with JavaScript setInterval(showImage, [3000ms]). A user can scroll the thumbnails manually with a scrollbar, or using shift+scroll wheel, or on a mobile device swipe with their finger. Tapping or clicking the thumbnail populates the Hero image with the same image but larger.

I still want a user to be able to scroll the carousel manually - back up or go forward overriding the automatic matching - and then return to the automatic display mode.

I have not been able to identify a CSS method to set the position of the carousel grid so the thumbnail images track with the Hero image as they change every so many seconds… Animation strategies don’t seem to work for the carousel. Setting the position with CSS is not working either. If I can learn how to change the position of the grid in the container I can use code to change its’ position as needed.

  function shiftThumbs(difference){     // multiples of the thumb width
    var elem = document.getElementById("thumbs");
    elem.style.left = difference + "px;";
  }

I think this is just a CSS issue. Any help getting the carousel to move left or right would be appreciated.

2

Hey mate, your problems have nothing to do with CSS…

What you want is intersectionObserver

The problem that you will have is that in order to place the correct hero you will need to observe every thumbnail…

This will turn into a memory hog for hundreds of images…

The best bet is to:

  • use an object pool to cycle a fixed number of elements
  • use endless scroll and have an element at the start the continuously resizes to expand/ shrink the scrollbar
  • have 3 observers that target the hero location, start and end of observable page
  • have a debounce on your hero observer

I use something similar for endless scroll but this would need a lot more fiddling with…

Regarding scrolling just take Kevin’s codepen and slowly/ comment out/ modify it to suit your purposes… if it break un-comment until it works again…

1 Like
3

@steve.mills you are a PRINCE for helping me understand what is going on!!!

I took a look at the intersectionObserver HERE
https://www.w3.org/TR/intersection-observer/

but to implement it I found this this “Web Dev Simplified Blog” and video that was really useful

I am sort of a no-code newbie stretching the boundaries of what no-code / low-code can do. The CMS of Webflow lacks the features of a relational database so I use Xano, Combining JavaScript with Xano also gives me greater flexibility generating content and responding to users. It’s all kind of a Frankenstein. But lacking deep pockets I have to find solutions I can cobble myself with JavaScript.

Many thanks!!! I appreciate you!

2 Likes
4

:+1:

5

Hey Steve

The benefits of the IntersectionObserver are cool. But…
My interest is the ability to move the elements in the visible list using JavaScript to manipulate (change the positions) the elements within the container.

I can operated this with a scroll wheel and with my mouse (smoother of course) How would I go about controlling this behavior with JavaScript?

Have you been able to do this?
Thanks

6

I wonder if scrollIntoView would help here:

It will allow you to scroll into the appropriate part of the parent container element easily :slight_smile:

Do you have a link to your carousel that we can take a look at?

7

Yeah I found scrollIntoView() method just after I reaching out to your forum. For some strange reason there are these esoteric functions and methods I’m just hearing about. :grinning:
I am hopeful that this will work with IntersectionObserver and dynamic content. I’m reading your blogpost Animated Scroll to Top with Easing and recognize there might be additional behaviors I want.
I appreciate your forum and the people on it. Gratitude!

2 Likes