Thumbnails feel awkward in finite mode

[davidburson]

In finite mode, showing a thumbnail for each slide, (carousel={{ finite: true, preload: slides.length - 1 }}), it feels strange that the selected thumbnail is always centered. For example, when the first slide is selected, only about half of the width of the window is used to display thumbnails. The first thumbnail is in the middle, and all other thumbnails are displayed to the right.

This means when there's more than just a few slides, some thumbnails are not visible at all. And yet there is just empty space to the left of the first thumbnail.

It seems to me, ideally:

• The whole thumbnail row would be centered, not the selected thumbnail.
• If there's room, all thumbnails would be visible.
• If there are too many slides for all thumbnails to be visible, the whole width of the window would be used to display thumbnails. In that case:
  • There would be forward and back arrows so the user could scroll through the thumbnails without selecting (so you could have one thumbnail selected, and scroll through all the other thumbnails looking for a similar slide, for example).
  • When you select the first or last visible thumbnail, and there exists at least one more thumbnail before/after the one selected, the row of thumbnails would automatically scroll to make the previous/next thumbnail visible.

How much of this, if any, is currently possible with yarl?

[igordanchenko]

I'm afraid none of the above is currently possible with YARL. What you are describing is a very different UX as compared to the existing Thumbnails plugin, and would require a completely different implementation.

it feels strange that the selected thumbnail is always centered

YARL was designed as mobile-first component, hence most of the design decisions favored mobile UX over desktop UX when a choice had to be made between the two. If you open the lightbox on a mobile device in portrait orientation, there's barely enough room for 3 thumbnails, hence the current thumbnail is always centered.

Infinite carousel (which is the default mode) solves the awkward empty space issue that you are describing. But as you mentioned in the other discussion, there is a duplicate thumbnail in the case of an even number of slides - which IMO not that big of a price to pay in this case.

Anyway, if you are not entirely happy with the existing Thumbnails plugin UX, you can always implement your own as YARL is a highly extensible library! Please let me know if you are interested and I'll be more than happy to show you the ropes.

[davidburson]

That is a helpful explanation, thank you! Overall, I'm very happy with YARL. For now I think YARL as-is sufficiently solves a pain point in our software. I hope at some point to revisit this but can't take the time at the moment to develop a plugin. When I'm ready to do that, I will be grateful for your guidance! Or, if I'm really lucky, someone else will beat me to it and make their solution available :)