如何制作包含多張圖片的JS幻燈片？

Question

我目前有一個“功能正常”的JS幻燈片/輪播，但遇到一個問題，我的幻燈片容器非常寬，並且一次只能顯示一個縮略圖。

我想創建一組8個默認圖像，這些圖像可以一次顯示。 如果您單擊箭頭，我希望它顯示多出8張圖像。 除此之外，我想告訴您正在查看的圖像。 （例如：顯示圖像1至8）

用紅色圈出的區域是我的整個幻燈片容器

但是您可以看到它僅顯示一個圖像和一個箭頭。

如何使該圖像一次顯示更多圖像，並根據需要進行處理？

 <div class="w3-content w3-display-container">
      <?php foreach ($imageResult as $im): ?>
        <?php if($im['type'] == 'content'){?>

          <img class="mySlides" src="<?php echo $im['url']; ?>" style="max-width:200px; max-height:200px;">

        <?php } ?>
     <?php endforeach?>
    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>

 <script>
 var slideIndex = 1;
 showDivs(slideIndex);

 function plusDivs(n) {
 showDivs(slideIndex += n);
 }

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

Answer 1

也許嘗試這樣的事情：

 <script>
 var slideIndex = 1; // This may skip the first image... maybe change to 0?

 showDivs(slideIndex);

 function plusDivs(n) {
  showDivs(slideIndex += n);
 }

 function showDivs(n) {
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}

  // Assuming we can show the next 8 images...
  var maxCount = slideIndex + 8;

  // However, there may not be 8 more images... 
  if(slideIndex + 8 > x.length){
    maxCount = slideIndex + (x.length - slideIndex);
  }

  // Hide all images...
  x.style.display = "none";   

  // Show the next 8 or so images...
  for (i = slideIndex; i <= maxCount; i++) {
    x[i].style.display = "block";
  } 
 }
 </script>