Variable Size Thumbnails

[calvinsomething]

Thank you for making this library. I was recommended to use Keen-Slider, which looks good, but after trying it out for a bit and reading online I heard about this one, which I was more impressed with.

I am wondering is there are any examples out there of a thumbnail carousel with variable width images, or if in the y-axis (which is what I am trying to do), variable height images. I can get my images to look right, with variable heights and 100% width of the carousel container, but then the scroll breaks. It will move up and down, but always snap back to the original position and selecting an item doesn't move it. I can get the scroll to work, though, if the height is set statically.

This is from the thumbnails example. I don't know what's happening here at all.

.embla__slide__thumbnail {
  position: absolute;
  opacity: 0.2;
  top: 0;
  bottom: 0;
  left: -10000%;
  right: -10000%;
  margin: auto;
  min-width: 1000%;
  min-height: 1000%;
  max-width: none;
  transform: scale(0.1);
  transition: opacity 0.2s;
}

Whenever I've gotten the sizes to look right, I've always had to remove position: absolute. I'm assuming to get everything to work I will have to find a way to keep position: absolute while also getting the sizes correct.

Thanks for any help!

[davidjerleke]

Hi @calvinsomething,

Embla reads the getBoundingClientRect().height property on your slides when axis: 'y' in order to calculate the slide positions. The scroll probably breaks because getBoundingClientRect().height returns 0 when you don't specify any height on your vertical thumbnails:

The main problem being that if you don't specify any height, your thumbnails won't have any height until the images have loaded. And if you initialize your thumbnail carousel before the thumbnails have any height, calculating the scroll positions from the slide heights will fail.

If your image endpoint provides the image sizes from the server, you can create placeholders for your thumbnails when server side rendering them. If not, you probably have to add some logic that initializes the thumb carousel only when all thumbnail images have loaded. If this approach suits you better, you can conditionally render your carousel as described here.

About the strange CSS 😅, that's a hack to mimic object-fit in IE11 (because object-fit isn't supported in IE11). Here's a modern setup and I think the CSS here will make more sense.

Best,
David

[calvinsomething]

Sorry! Your example does work if I remove the height of the slides and make sure the carousel is reinitialized. I was testing that with no luck, but I guess I didn't do it in this case. Sorry and thank you again!!

[davidjerleke]

Hi Calvin (@calvinsomething),

Please create a CodeSandbox. Otherwise it’s impossible for me to know if your setup is causing this or not.
My guess would be that you still don’t wait for all your images to load before re-initializing the carousel. But I can only guess without a CodeSandbox.

Best,
David

[calvinsomething]

Here is a Sandbox.

If you resize the height of the window, the scrolling starts to work. But if you switch slides, the scrolling becomes inaccurate. This is more noticeable when the carousel is shorter, I think (and when switching from the first set of slides to the second... in some cases it looks like it works perfectly...)

I did not set up the initial loading (which I don't know how to do properly anyway, I tried setting the ref to someBool ? emblaRef : null, but I don't think that worked). However, I guess I thought using a useEffect with the slides array as a dependency would force a reInit() whenever the slides change, and therefore the initial load should be covered.

I guess the actual "loading" is what I don't understand. Just because the array of strings is ready, doesn't mean the images themselves have been loaded, and the actual media would be required for setting the heights, I imagine.

Thanks so much for the help.

[davidjerleke]

Hi @calvinsomething,

Thanks for the Codesandbox 👍. Looking at your code, it's obvious that you don't have any onLoad listeners on your images in order to determine when Embla should be initialized. This is happening in your example:

• The images (<img .../>) inside the slides make requests in order to fetch the image from its given src attribute.
• All these images will have no height until the request has finished and the image has loaded.
• Meanwhile, you're initializing Embla without waiting for all images to load. So by the time you initialize Embla, some of the images are still loading and have no height.
• It's pure luck that it works when you initialize Embla the first time, because if the images would take longer to load, and you have a bad connection, your current setup would fail.

This is how the browser and asset (in this case image) loading works. It's asynchronous. For example, this is no different from having load spinners when your images are loading and removing them once an image has finished loading. And you have to make sure all images have finished loading before running Embla. Alternatively, you can reinitialize Embla when all images have loaded.

This is the promise Embla makes:

• It can handle any slide sizes, BUT, the slides need a width or height before initializing Embla.
• You don't have to set it explicitly in your CSS, but you can't put images in your slides when they're loading and have 0 height, and still expect Embla to know that their height will change in the future when your images have loaded.

I hope this makes sense and I was explain this in an understandable manner. If not, I suggest you read more about image loading in the browser in general, and how that works. Images will have 0 height until its src has finished loading, unless you give it a height in CSS or set an aspect ratio on them. And you can use the load event to determine when an image has finished loading.

Best,
David

[calvinsomething]

Thanks so much! I had no idea about the onLoad event as part of HTML. That makes things obvious now.