PathView elements displacement is not equal

[dsba]

I am trying to draw a button with certain width and height on PathView. As CurrentItem starts from center, center button is highlighted .
Problem I am facing is, to fix spacing between each element to size of that arrow so that output look like after a chain of numbers in incremental order.

Thanks in advance.

[dsba]

using PathPercent I am able to achieve it like this but looping appearance does not present i.e after 2, 3 should appear and 6 should be followed by an arrow.

I also notice that on pathItemCount increase or decrease, this again vary with displacement of elements.

[dsba]

Or is there any other way, I can achieve this using widget/qml component?