JavaScript — вытащить все изображения из папки и создать карусель / слайд-шоу Bootstrap
M застрять с этим кодом, где я пытаюсь вытащить все изображения в папке & поместите их в список или div, чтобы создать загрузочную карусель.
<div id="spa_gallery" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<?php
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
$imagelist.= '<li class="item"><a href=""><img src="'.$image.'" /></a> </li>';
}
?>
<!-- Carousel controls -->
<a class="carousel-control left" href="#spa_gallery" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
<a class="carousel-control right" href="#spa_gallery" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
</div>
</div>
где предыдущий код был:
<div class="carousel-inner">
<div class="item active"> <img src="spa_gallery/01.jpg" alt="First Slide">
</div>
<div class="item"> <img src="spa_gallery/02.jpg" alt="Second Slide"> </div>
<div class="item"> <img src="spa_gallery/03.jpg" alt="Third Slide"> </div>
<div class="item"> <img src="spa_gallery/04.jpg" alt="Fourth Slide"> </div>
<div class="item"> <img src="spa_gallery/05.jpg" alt="Fifth Slide"> </div>
</div>
Решение
попробуй использовать
<?php
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
?>
<div class="item"><img src="<?php echo $image; ?>" /></div>
<?php
}
или же
<?php
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
$imagelist.= '<div class="item"><img src="'.$image.'" /></div>';
}
echo $imagelist; //<<<<<
?>
для меня я использовал что-то вроде следующего кода
$dir_imgs = "spa_gallery";
$files_imgs = scandir($dir_imgs);
foreach ($files_imgs as $key_imgs => $value_imgs){
$php_imgs = explode(".", $value_imgs);
$php_imgs = end($php_imgs);
if ($php_imgs == "jpg"){
?>
<div class="item"><img src="<?php echo $dir_imgs.'/'.$value_imgs; ?>" /></div>
<?php
}
}
добавить активный класс в img
$class_active = 0; // before foreach
<div class="item <?php echo (($class_active == 0)? 'active' : '') ?>">
затем
$class_active = 1;
так твой код будет
<?php
$class_active = true;
$dirname = "spa_gallery/";
$images = glob($dirname."*.jpg");
foreach($images as $image) {
?>
<div class="item <?php if($class_active == true){ echo 'active' ; $class_active = false} ?>"><img src="<?php echo $dirname.$image; ?>" /></div>
<?php
}
Другие решения
Других решений пока нет …