如何使用foreach循环为图像幻灯片创建分页

Question

我正在尝试为图像幻灯片创建点分页。我不知道如何设置

以遍历数组中的图像数量，当我尝试手动添加时，它呈现在单个图像上。

  echo '<div id="slider">';
                        echo '<div class="slides">';
                        echo '<div class="switch">
                        <ul>
                          <li>
                            <div class="on"></div>
                          </li>
                        </ul>
                      </div>';
                            $slider_array = get_field('slider');
                            foreach($slider_array as $sub_array) {
                                    if (!empty($sub_array )) {
                                        echo '<div class="slider">';
                                        // echo '<div class="legend"></div>';
                                        echo '<div class="content">';
                                            echo '<div class="content-txt">';
                                            echo '<h2>'.$sub_array['slider_text'].'</h2>';  
                                            echo'</div>';
                                            echo '</div>';
                                            echo '<div class="images">';
                                            echo '<img src="'.$sub_array['slider_image'].'" />';
                                            echo'</div>';
                                        echo '</div>';

                                    }                   
                            }

                            echo '</div>';
                            echo '</div>';

用于分页的CSS 我试图隔离图像幻灯片的css，因为它很长，但是图像幻灯片在整个数组中循环时效果很好。我只需要为节目中的单个图像创建点分页即可。您的帮助将不胜感激。

.switch{
  width:120px;
  height:10px;
  position:absolute;
  bottom:50px;
  z-index:99;
  left:30px;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#333;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
.switch ul{
  overflow:hidden;
}
.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f39c12;
  position:relative;
  -webkit-animation:on 30s infinite;
  -moz-animation:on 30s infinite;
  animation:on 30s infinite;
}