Извлечение изображений определенным образом

Question

У меня есть слайдер (flexslider), который я настроил, так что на слайд появляются 10 изображений. Конструкция была построена таким образом, что источники изображений вставляются вручную. Теперь я пытаюсь оптимизировать слайдер, чтобы изображения извлекались динамически с помощью php. И мне это удалось, но только одно изображение появляется на слайде. Любая помощь в создании 10 разных изображений, появляющихся на слайде?

Slider Код: JSFIDDLE: https://jsfiddle.net/atkumqpk/1/

HTML:

<div id="menu" class="menu"> 
    <ul class="headlines"> 
     <li id="item1"> 
      <button>aaaaaaaa</button> 
     </li> 
     <li id="item2"> 
      <button>bbbbbbb</button> 
     </li> 
     <li id="item3"> 
      <button>ccccccc</button> 
     </li> 
     <li id="item4"> 
      <button>dddddddd</button> 
     </li> 
     <li id="item5"> 
      <button>eeeeeee eee.</button> 
     </li> 
     <li id="item6"> 
      <button>ffffff</button> 
     </li> 
     <li id="item7"> 
      <button>ggggggg</button> 
     </li> 
    </ul> 
</div> 
<div id="container"> 
<div id="first" class="inner-container"> 
    <div id="item11" class="item"> <a name="item11"></a> 

       <div class="flexslider"> 
    <ul class="slides"> 
    <li> 
       <img id="image1" src="http://placehold.it/350x150" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img id="image1" src="http://placehold.it/350x150" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
    </li> 
    <li> 
     <img id="image1" src="http://placehold.it/350x150" /> 
       <img id="image2" src="http://placehold.it/350x150" /> 
       <img id="image3" src="http://placehold.it/350x150" /> 
       <img id="image4" src="http://placehold.it/350x150" /> 
       <img id="image5" src="http://placehold.it/350x150" /> 
       <img id="image6" src="http://placehold.it/350x150" /> 
       <img id="image7" src="http://placehold.it/350x150" /> 
       <img id="image8" src="http://placehold.it/350x150" /> 
       <img id="image9" src="http://placehold.it/350x150" /> 
       <img id="image10" src="http://placehold.it/350x150" /> 
    </li> 
    </ul> 
</div> 
      </div> 
     </div> 

РНР код, используемый для извлечения изображений:

 $folder = 'images'; // chose folder 
     $extensions = array('JPG','jpg','jpeg','gif','png'); // allowed extensions 
    $slika = scandir($folder); // scan folder 
    sort($slika); // sort 
    foreach($slika as $key => $value) {  
      $get_extensions = explode(".",$value); 
      $ext = $get_extensions[count($get_extensions) - 1]; 
      if (in_array($ext, $extensions)) 
      { 
      $title = substr($value, 0,strrpos($value,'.')); // image name 
      echo "<li><img src='".$folder."/".$value."' /></li>"; 
      } 
    } 

Answer 1

Это возвращает массив на куски 10, на основе указанных folder.

function get_slide_images($folder, $images_per_slide = 10) 
{ 

    $slide_images = false; 

    if (file_exists($folder)) { 

     // valid extensions 
     $extensions = array(
      "jpg", 
      "gif", 
      "jpeg", 
      "svg", 
      "png", 
      "bmp" 
     ); 

     foreach (new DirectoryIterator($folder) as $file_key => $file) { 

      // Don't bother 
      if (!in_array($file->getExtension(), $extensions)) { 
       continue; 
      } 

      // Grab file details 
      $filename = $file->getFilename(); 
      $file_folder = $folder . "/" . $filename; 

      // Store the image to the Slide 
      $slide_images[$filename] = "<img src='{$file_folder}' alt='{$file_folder}' />"; 

     } 

     if (!empty($slide_images)) { 
      ksort($slide_images); 
      $slide_images = array_chunk($slide_images, $images_per_slide); 
     } 

    } 
    return $slide_images; 
} 

Использования

$slider_kvp = get_slide_images("images", 10); 

echo "<pre>"; 
var_dump($slider_kvp); // This will tell you whats in our slider 
echo "</pre>"; 

/** 
* Here we are going to generate the SLIDES 
*/ 
if($slider_kvp) { 

    $slider_list_html = array(); 

    foreach($slider_kvp as $slider_key => $slide_images) { 

     $html_LI_list = ""; 
     $html_LI_list = "<li>"; 

     // Go through each image ... 
     foreach($slide_images as $image_key => $image_value) { 
      $html_LI_list .= $image_value; 
     } 

     $html_LI_list .= "</li>"; 

     $slider_list_html[$slider_key] = $html_LI_list; 

    } 

    // OUR SLIDES! 
    $rendered_slider_list_html = implode(' ', $slider_list_html); 
    echo "<ul class='slides'>{$rendered_slider_list_html}</ul>"; 

}