How to insert a photo from the database into the slider

There is a code that produces photos added to the database. I tried to insert this code into regular js sliders, but all I got was a bunch of photos superimposed on each other and a slider that didn’t work.

How can I make a slider out of this code?

include('dat.php');
$query = "SELECT * FROM tabl_image ORDER BY image_id DESC";
$statement = $connect->prepare($query); 
$statement->execute();
$result = $statement->fetchAll();
$number_of_rows = $statement->rowCount();
if($number_of_rows > 0)
{
 $count = 0;
 foreach($result as $row)
 {
  $count ++; 
  $output .= '
  <tr>
   <td><img src="files/'.$row["image_name"].'" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="'.$row["image_description"].'" title="'.$row["image_description"].'"/></td>
  </tr>
  ';
 }
}
else
{
 $output .= '
  <tr>
   <td colspan="6" align="center">Данные не найдены</td>
  </tr>
 ';
}
$output .= '</table>';
echo $output;
?> 

Here is how the code looks when this script is in the slider

<div class="slider">
  <input type="radio" name="switch" id="btn1" checked="">
  <input type="radio" name="switch" id="btn2">
  <input type="radio" name="switch" id="btn3">
   <input type="radio" name="switch" id="btn4">
  
  <div class="switch">
    <label for="btn1"></label>
    <label for="btn2"></label>
    <label for="btn3"></label>
    <label for="btn4"></label>
  </div>
  
  <div class="slider-inner">
    <div class="slides">
      
  
   <img src="files/dsc09678.jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/1920x1200_494270_[www.ArtFile.ru].jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/dsc09678.jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/1920x1200_494270_[www.ArtFile.ru].jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/dsc09678.jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/1920x1200_494270_[www.ArtFile.ru].jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
      </div>
  </div>
  
</div>

Answer

You should use JS to change the item.

var slideIndex = 1;
showSlides(slideIndex);

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

* {box-sizing: border-box}
.mySlides {display: none}
img {
  vertical-align: middle;
  max-width: 200px;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

<div>
  <input type="radio" name="switch" onclick="currentSlide(1)" checked=""/>
  <input type="radio" name="switch" onclick="currentSlide(2)" />
  <input type="radio" name="switch" onclick="currentSlide(3)" />
</div>

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="https://i.imgur.com/moc7wzX.jpeg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://i.imgur.com/1GR4azu.jpeg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://i.stack.imgur.com/ObWbI.png" style="width:100%">
  </div>
</div>

PS: Image are taken randomly on imgur.