Extracting images in a certain way

Question

I have a slider (flexslider) that i customized, so that 10 images appear per slide. The design was built in a way that images sources are inserted manually. Now i'm trying to optimize the slider so that images are extracted dynamically using php. And i managed to do so, however only one image is appearing per slide. Any help in making 10 different images appearing per slide?

Slider code: 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>

The PHP code used to extract the images:

        $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

This should return an array in chunks of 10, based on specified 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;
}

Usage

$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>";

}