How to randomize images in WordPress with Javascript (Advanced custom fields)

I am using Advanced Custom Fields to build a WordPress site. One of the pages needs to have a header image that changes randomly after a couple of seconds. I am trying to make it possible to choose which images will be randomly displayed with ACF.

With ACF I have created a custom field called Random images.

In the next step, the images will be loaded by the PHP template. Afterward, the images should be randomized with Javascript and shown on the page where I use the custom field. How do I do to make this work?

PHP & Javascript

<?php
if (get_row_layout() == 'random_images') {
?>
    <section id="gallery">
    <img src="' <?php get_sub_field('ra_photo_one'); ?>
    <img src="' <?php get_sub_field('ra_photo_two'); ?>
    <img src="' <?php get_sub_field('ra_photo_three'); ?> 
    <img src="' <?php get_sub_field('ra_photo_four'); ?>
    <img src="' <?php get_sub_field('ra_photo_five'); ?>
    </section>
    <?php
}
?>

<script>
const getRandomNumber = (function() {
  var nums = [1,2,3,4,5,6];
  var current = [];
  function rand(n) {
      return (Math.random() * n)|0;
  }
  return function() {
    if (!current.length) current = nums.slice();
    return current.splice(rand(current.length), 1);
  }
}());

const images = document.querySelectorAll('#gallery img');

getRandomImages = () => {
const imagesNums = [];
for (let i = 1; i < 7; i++) {
  imagesNums.push(getRandomNumber());
}

images.forEach((img, index) => {
    img.src = `./images/${imagesNums[index]}.jpg`
})
}

setInterval(() => {
 getRandomImages()
}, 500);

</script