Merhabalar kodlar aşağıdaki gibidir, belirttiğim gibi otomatik geçişi mevcut slider üzerinden yapmam gerekiyor. (css html ve js kodları peş peşe)

        <style type="text/css">
 #slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<?php 
$sor=$db->prepare("SELECT * from slider order by id ASC");
    $sor->execute();

     $say=0;
     while($cek=$sor->fetch(PDO::FETCH_ASSOC)) { $say++?>

.slide<?php echo $say; ?> {
  background-image: url("<?php echo $cek['resim']; ?>");
}
<?php } ?>

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}

        </style>
        
        <div class="introduction">
            
<div id='cssmenu'>
 <a href="index.html"> <img src="img/narin-logo.png" onmouseover="this.src='img/narin-logo2.png'" onmouseout="this.src='img/narin-logo.png'"></a> 

 
</div>
  
  <div class="wrap">
  <div id="arrow-left" class="arrow"></div>
  <div id="slider">
    <?php 
$sor=$db->prepare("SELECT * from slider order by id ASC");
    $sor->execute();
        $say=0;
        while($cek=$sor->fetch(PDO::FETCH_ASSOC)) { $say++?>
    <div class="slide slide<?php echo $say; ?>">
      <div class="slide-content">
      </div>
    </div>
<?php } ?>

   
  </div>
  <div id="arrow-right" class="arrow"></div>
</div>
  
<script type="text/javascript">
    let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

</script>
        </div>