QML ListView Horizontal Scrolling

Question

I just started learning Qml and i am trying to acheive the following with list view.

I have a Qml list view with Left, Right Scrolling Buttons and that can display 7 items at a time. The ListView orientation is Horizontal.

What I expect to achieve is: assume there are in total 12 items in the list 1)If User has not selected any list item then default selected list item will be 0, in this case if user presses on Right Scroll Button the list current index should jump to 11 i.e to the last item. And if user presses on the Left scroll button then list current index should jump to 0 i.e to the first item in list. 2)If user has selected any of the list item i.e user has selected item 7 and exited from the screen and when comes back to change the selection the list view will be scrolled & highlighted to the selected item i.e 7 and now when he presses on Right arrow it should show the remaining list items i.e items available after the selected item.

I am posting code for understanding

property int selectedItemIndex : 0

property bool isLeftSelected: false        
ListView {
            id: listView
    
            property int nButtons: 7
            property int nPages: Math.ceil(count / nButtons)
            property int currentPage: Math.floor(currentIndex  / nButtons) + 1
    
            function scrollLeft() {
                if (currentPage > 1) {
                    console.log("IF_BEFORE::CURRENTPAGE::"+currentPage+"::nPages:"+nPages+"::currentIndex::"+currentIndex+"nButtons::"+nButtons)
                    currentIndex = (nButtons * (currentPage - 1)) - nButtons
                    console.log("IF_AFTER::CURRENTPAGE::"+currentPage+"::nPages:"+nPages+"::currentIndex::"+currentIndex+"nButtons::"+nButtons)
                } else {
                    currentIndex = 0
                }
            }
    function scrollRight() {
                if(currentPage <= nPages)
                {
    var newIndex = ((currentPage + 1) * nButtons) - 1 
    currentIndex = newIndex > count - 1 ? count - 1 : newIndex
                }
            anchors.left: leftScrollButton.right
            anchors.right: rightScrollButton.left
    
            orientation:ListView.Horizontal
            interactive: false
            currentIndex: root.selectedItemIndex
            highlightMoveDuration: 500
            highlightMoveVelocity: -1
            clip: true
    
            delegate: FixedButton {                  
                property int delegateIndex: index
                height: 80
                width: 100
    
                state: pressed ? 'active' : (checked ? 'selected' : 'standard')
                checked: root.selectedItemIndex === index
    
                Caption {
                    id:idtext
    
                    anchors.top: icon.bottom
                    anchors.topMargin: -10
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: parent.width * 0.85
    
                    text: parent.btnText
                    font: Theme.fonts.motorwaySemibold18Up
                    color: parent.pressed || parent.checked ? white : grey
                    elide: Text.ElideNone
                    lineHeight: 0.6
                    horizontalAlignment: Text.AlignHCenter
                    maximumLineCount: 2
                    wrapMode: Text.Wrap
                }
    
                onClicked: {
                    if(root.isLeftSelected === true ) {
                        console.log("DOSomething")
                    } else {
                        console.log("DOSomething")
                    }
                    root.selectedItemIndex = listView.currentIndex = index
                    root.btnClicked()
                    }
    
                onPressAndHold: {
                    root.btnPressandHold()
                }
            }
        }
    Button{
    id:LeftScrollBtn
    widht:30
    height:30
    enabled:!listView.atXBeginning
    onClicked:{
    listView.scrollLeft()
    }
    }
    
    Button{
    id:RightScrollBtn
    widht:30
    height:30
    enabled:!listView.atXEnd
    onClicked:{
    listView.scrollRight()
    }
    }

The current Left & Right Scroll Logic that i have implemented in the code are working as per the expectation if the list item displays 14 items i.e (0-13) but if the items are more than 14 the expected behavior no 2 from my expectations is not getting satisfied.

What is happening is if the user selected 7th item and exited from the screen and when he comes back he could see the list will be scrolled to 7th item and the same will be highlighted and now when he presses on Right scroll button the list current index is jumping to the last item index in the list. In expectation it should show next 6 items along with the selected item as the list can show only 7 items at a time.

I am unable to correct the logic of right and left scroll if the items are more than 14 i.e no of list pages becomes 3.

Sorry for the lengthy question, requesting your help for the same. Thanks in advance.