Carousel option is unclickable for option with short name

Screenshots

Version

npm package v: “4.10.0”

Describe the bug

Carousel option is unclickable for option with short name

Steps to reproduce

Need to add as much option for the user to see the carousel (provide name as short as you can, one letter for ex), then there is arrows on both sides which comes on hover, and DIV with className=‘slider’ is hovering almost first element , and if you scroll to the end right arrow div hovers last element as it is hard to click it added colors to the div so it easier to see what I mean

Expected behavior

div should be smaller, perfectly the size as the arrow and do not block user to choose the option

Additional context

[Bug]

[compulim]

@Quirinevwm do you like this one?

The flipper buttons are placed in padded space outside of the first and last element:

Alignments:

The flipper buttons will be hidden if they are no longer needed:

For a closer look, the highlighted parts are the bounding box of the flipper button, both yellow and blue. As soon as the user clicks on either yellow or blue part, it activates the flipper button.

[corinagum]

Based on discussion above, I think it’s good to go with @compulim’s solution since it will fix the original problem. In terms of fine-tuning the UX, maybe after this change has been implemented we could all meet again for design tweaking. Thoughts?