Add before and after and offset from selected classNames

[strindhaug]

Is your feature request related to a problem? Please describe. I've been experimenting with using the centered carousel showing multiple items at once, and having the middle one (i.e. the selected item) be larger than the others. I've fixed that using css transform: scale(.85); on every item and transform: scale(1); on the selected one which works fine; except it makes the spacing seem unequal, since the selected one is filling the whole area while the others are filling less. If I had some className to differentiate the ones before the selected from the ones after the selected; it could make it look less unbalanced by adjusting the transform-origigbefore and after.

Describe the solution you'd like If the ones before the item with BrainhubCarouselItem--activehad the class BrainhubCarouselItem--beforeand the ones after had BrainhubCarouselItem--after.

And if we already have the index of each item and the index of the active item, we could easily calculate the index relative to the active one so we could also have the absolute value of this "relative index" appended to another className, so that if you want you could for instance have different scaling or opacity for items of depending on how close they are from the active one.

For example if we have 5 items and the second one is "selected" the items would have these classNames:

• BCI BCI--before BCI--relindex-1
• BCI BCI--active BCI--relindex-0
• BCI BCI--after BCI--relindex-1
• BCI BCI--after BCI--relindex-2
• BCI BCI--after BCI--relindex-3

Describe alternatives you've considered I wondered if there might be some fancy all-css way to do this, but I don't think there is a way in CSS to reference sibling elements relative to one node.

Additional context Example showing the unequal spacing issue I have, all images having the same transform-origin: top center:

The same slider with the transform origin manually changed using the devtools (to top left, top left, top center, top right, top righ respectively):

I'm probably going to implement this change in a fork anyway, so if you want this feature, I'll make a pull request.

[strindhaug]

I changed the term from "offset" to "relindex" in my PR to avoid confusion with the other usage of "offset" in the same component. Updated the description here.