Make a Slideshow with array of images

I have the following:

rule!ADC_DicionarioBanners

{
  {
    id: 5,
    urlImagemMobile: "https://asset.gecdesigns.com/img/wallpapers/beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp",
    urlImagemTablet: "https://asset.gecdesigns.com/img/wallpapers/beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp",
    urlImagemDesktop: "https://asset.gecdesigns.com/img/wallpapers/beautiful-fantasy-wallpaper-ultra-hd-wallpaper-4k-sr10012418-1706506236698-cover.webp",

  },
  {
    id: 6,
    urlImagemMobile: "https://wallpapercrafter.com/sizes/1366x768/108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg",
    urlImagemTablet: "https://wallpapercrafter.com/sizes/1366x768/108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg",
    urlImagemDesktop: "https://wallpapercrafter.com/sizes/1366x768/108198-purple-nature-colorful-trees-forest-smoke-mist-artwork.jpg",

  },
  
}

interface rule:

a!localVariables(

  local!indexBanner: 1,

  local!listaBanner: rule!ADC_DicionarioBanners(),
  a!headerContentLayout(
    header: {
      /*BANNER*/
      a!billboardLayout(
        backgroundMedia: a!webImage(
          source: if(
            or(
              a!isPageWidth("PHONE"),
              a!isPageWidth("TABLET_PORTRAIT")
            ),
            local!listaBanner[local!indexBanner].urlImagemMobile,
            local!listaBanner[local!indexBanner].urlImagemDesktop
          )
        ),
        backgroundColor: "#f0f0f0",

        marginBelow: "NONE",
        overlay: a!barOverlay(
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: "angle-left-bold",
                        link: a!dynamicLink(
                          value: if(
                            local!indexBanner > 1,
                            local!indexBanner - 1,
                            length(local!listaBanner)
                          ),
                          saveInto: local!indexBanner
                        ),
                        linkStyle: "STANDALONE",
                        color: "#ffffff",
                        size: "LARGE"
                      )
                    }
                  )
                ),
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: "angle-right-bold",
                        link: a!dynamicLink(
                          value: if(
                            length(local!listaBanner) > local!indexBanner,
                            local!indexBanner + 1,
                            1
                          ),
                          saveInto: local!indexBanner
                        ),
                        linkStyle: "STANDALONE",
                        color: "#ffffff",
                        size: "LARGE"
                      )
                    },
                    align: "RIGHT"
                  )
                )
              },
              showWhen: a!isNotNullOrEmpty(local!listaBanner)
            )
          },
          style: "NONE"
        )
      )
    },
    )

)

My goal is to automatically switch between images on every 10 seconds, regardless of the length of the array of dictionaries returned by the ADC_DicionarioBanners rule (which contains the banner information, with image url). Is this possible? Thanks