How can I define my javascript to display the images I found in my php script

first of all I am new in this and I thank all the people here I learned of.

My problem: I created a setting where you can upload pictures in the folder "test"in two different ways. I want to display the picutes in an automatic slideshow which takes the pictures out of the folder. (Imag 1.jpg, 2.jpg, 3.jpg are in the folder TEST.)

my PHP CODE:

<?php
$dir_path = "test/";
$extensions_array = array('jpg','png','jpeg');
$phpArray = array();

$dateien=scandir($dir_path);
$anzahl=count($dateien);

    //echo "Anzahl $anzahl";


if(is_dir($dir_path))
{
$files = scandir($dir_path);

for($i = 0; $i < count($files); $i++)
{
if($files[$i] !='.' && $files[$i] !='..')
    {
        $file = pathinfo($files[$i]);
        $extension = $file['extension'];

        while(in_array($extension, $extensions_array))
        {
        // show image

        echo "<img src='$dir_path$files[$i]' style='width:500px;height:500px;'><br>";
           $phpArray []= array($dir_path, $files[$i]); 
           $filename[]= array($files[$i]);
            //echo $i;
            $i++;
        //echo "Anzahl $anzahl";

                if ($i>$anzahl) 
                    {break;}
            }
    }
}
}
$dir_path2 = "uplaods/";
$dateien2=scandir($dir_path);
$anzahl2=count($dateien2);

if ($anzahl2>$anzahl)

?>

with the php code I get the folder path and the file name and I could display the pictures seperatly, but not in an slideshow:

MY HTML/JAVASCRIPT CODE

<!DOCTYPE html>
<html>
<title>automatic slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Automatic Slideshow</h2>

<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="1.jpg" style="width:100%" >
<img class="mySlides" src="2.jpg" style="width:100%">
<img class="mySlides" src="3.jpg"style="width:100%">
</div>


<script>

var myIndex = 0;
carousel();

function carousel() {
var i;
 var x = document.getElementsByClassName("mySlides");  / HERE I NEED HELP
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}    
x[myIndex-1].style.display = "block";  
setTimeout(carousel, 2000); // Change image every 2 seconds
}

</script>

</body>
</html>

the slideshow code works for the images I defined in the div, but I want to have it out of the folder. I was able to get the filename and the folder path from php to javascript but I was not able to tell javascript to display the picutes out of the folder.

is it even possible?

Solution

PHP:

<?php
$dir_path = "test/";
//$dir_path2 = "uplaods/";
$extensions_array = array('jpg','png','jpeg');

if(is_dir($dir_path))
{
    $files = array_slice(scandir($dir_path), 2);
    foreach ($files as $file)
    {
        $ext = pathinfo($file);
        $ext = $ext['extension'];

        if(in_array($ext, $extensions_array))
            $images[] = '<img class="mySlides" src="'. $dir_path . $file .'" style="width:500px;height:500px;">';
    }
}
?>

HTML (within PHP file):

<!DOCTYPE html>
<html>
<head>
	<title>automatic slideshow</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<style>
	.mySlides {display:none;}
	</style>
</head>
<body>

	<h2 class="w3-center">Automatic Slideshow</h2>
	<div class="w3-content w3-section" style="max-width:500px">
	<?php echo implode ("<br />", $images); ?>
	</div>


	<script>
		var myIndex = 0;
		carousel();

		function carousel() {
			var i;
			var x = document.getElementsByClassName("mySlides");  //HERE I NEED HELP
			for (i = 0; i < x.length; i++) {
				x[i].style.display = "none";  
			}
			myIndex++;
			if (myIndex > x.length) {myIndex = 1}   
			x[myIndex-1].style.display = "block";  
			setTimeout(carousel, 2000); // Change image every 2 seconds
		}
	</script>
</body>
</html>