An Override file that lets you control the Page component as a Slides component with arrow keys in Framer

slideControls.tsx

import { Override, Data } from "framer"
import * as React from "react"

const slideData = Data({ currentSlide: 0 })

export function SlideControls(props): Override {
    // This sets the slidesNumber dynamically from the Page component
    const slidesNumber = React.Children.toArray(props.children)[0].props
        .children.length

    // This creates a listener for the arrow keys
    React.useEffect(() => {
        function pressKey(event) {
            if (event.key === "ArrowRight") goRight()
            if (event.key === "ArrowLeft") goLeft()
        }
        document.addEventListener("keydown", pressKey)
        return function removeListener() {
            document.removeEventListener("keydown", pressKey)
        }
    })

    // These navigate through the slides
    function goRight() {
        if (slideData.currentSlide < slidesNumber - 1) slideData.currentSlide++
    }

    function goLeft() {
        if (slideData.currentSlide > 0) slideData.currentSlide--
    }

    return { currentPage: slideData.currentSlide }
}

Thank you for this. 👍