Merhabalar PHP ile bir slider kodu kullanıyorum sayfam için. Şöyle bir sorun yaşıyorum. Slider alanında eğer 1 fotoğraf varsa slider kutusu boş görünüyor. 2 fotoğraf ve üstü olunca slider alanında fotoğraflar gösteriliyor. Slider alanın altında her fotoya ait küçük bir resim var ve ona tıklayınca ilgili fotoyu göstermesi lazım ama o alanda fotoğraflar çıkıyor lakin tıklayınca ilgili fotoğraf gelmiyor. Slider alanı düzgün çalışıyor sadece küçük resimlere tıklayınca gelmeme ve 1 foto olunca görünmeme sorunu vardır. Bu konuda yardımcı olabilecek biri var mıdır?

<div class="container">
<?php $images = acf_photo_gallery('istasyon_gorselleri', $post->ID); ?>
<?php   if( count($images) ): ?>
<?php    foreach($images as $image): ?>  

<!-- Full-width images with number text -->  
<div class="mySlides">    

<a href="<?php  $full_image_url= $image['full_image_url']; ?>">
<?php    $class = get_field('gallery_images_class', $image['id']); ?>
<img class="mySlides" src="<?php echo $full_image_url; ?>" style="width: 100%;object-fit: cover;height: 350px;">    
</div>    
<?php     endforeach; ?><?php    endif; ?>    

  <!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

<div class="row"><?php $images = acf_photo_gallery('istasyon_gorselleri', $post->ID); ?>
<?php   if( count($images) ): ?>
<?php    foreach($images as $image): ?>                
<div class="column">        
<?php  $full_image_url= $image['full_image_url']; ?>    
<?php    $class = get_field('gallery_images_class', $image['id']); ?>      
<img class="demo cursor" src="<?php echo $full_image_url; ?>" style="width: auto;object-fit: cover;height: 90px;" onclick="currentSlide" >    </div>                

<?php     endforeach; ?><?php    endif; ?>           </div>     </div>

var slideIndex = 1;showSlides(slideIndex);
// Next/previous controlsfunction plusSlides(n) {  showSlides(slideIndex += n);}
// Thumbnail image controlsfunction currentSlide(n) {  showSlides(slideIndex = n);}

function showSlides(n) {  var i;  var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");  
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}  
if (n < 1) {slideIndex = slides.length}    
for (i = 0; i < slides.length; i++) {    slides[i].style.display = "none";  }  
for (i = 0; i < dots.length; i++) {    dots[i].className = dots[i].className.replace(" active", "");  }  
slides[slideIndex-1].style.display = "block";  
dots[slideIndex-1].className += " active";  
captionText.innerHTML = dots[slideIndex-1].alt;}

* {  box-sizing: border-box;}
/* Position the image container (needed to position the left and right arrows) */.container {  position: relative;}
/* Hide the images by default */.mySlides {  display: none;}
/* Add a pointer when hovering over the thumbnail images */.cursor {  cursor: pointer;}
/* Next & previous buttons */.prev,.next {  cursor: pointer;position: absolute;top: 43%;width: auto;padding: 10px;margin-top: -50px;font-weight: bold;font-size: 20px;user-select: none;-webkit-user-select: none;background: #fc7822;}
/* Position the "next button" to the right */.next {  right: 0; }
/* On hover, add a black background color with a little bit see-through */.prev:hover,.next:hover {  background-color: #f36d25;  color:white;}
/* Number text (1/3 etc) */.numbertext {  color: #f2f2f2;  font-size: 12px;  padding: 8px 12px;  position: absolute;  top: 0;}
/* Container for image text */.caption-container {  text-align: center;  background-color: #222;  padding: 2px 16px;  color: white;}
.row:after {  content: "";  display: table;  clear: both;}
/* Six columns side by side */.column {  float: left;  width: 16.66%;}
/* Add a transparency effect for thumnbail images */.demo {  opacity: 0.6;}
.active,.demo:hover {  opacity: 1;}