如何制作包含多张图片的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

也许尝试这样的事情：

<form action="/action_page.php" method="get">
  <input name="text1" value="Bla bla"><br>
  <input name="text2" value="Some text"><br>
  <input type="submit" value="Submit">
</form>