У меня есть слайдер (flexslider), который я настроил, так что на слайд появляются 10 изображений. Конструкция была построена таким образом, что источники изображений вставляются вручную. Теперь я пытаюсь оптимизировать слайдер, чтобы изображения извлекались динамически с помощью php. И мне это удалось, но только одно изображение появляется на слайде. Любая помощь в создании 10 разных изображений, появляющихся на слайде?
Код слайдера: 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>
Код PHP, используемый для извлечения изображений:
$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>";
}
}