Bootstrap 메인 화면을 Layout 할 때 Carousel (이미지 회전 화면) 기능을 쉽게 제공한다.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h 는 하나의 파일로 Carousel 을 제공하는 예제다.
그런데 직접 파일명을 갯수만큼 적어주는 방법이다.
그래서 지정한 폴더의 파일명을 자동으로 읽어서 화면에 보여주도록 코드를 보완했다.
보완 전 코드
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="<?php echo $g['path_image']?>carousel/01.jpg" style="width:100%;">
</div>
<div class="item">
<img src="<?php echo $g['path_image']?>carousel/02.jpg" style="width:100%;">
</div>
<div class="item">
<img src="<?php echo $g['path_image']?>carousel/03.jpg" style="width:100%;">
</div>
<div class="item">
<img src="<?php echo $g['path_image']?>carousel/04.jpg" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div> |
보완 후 코드
<?php
$path = $g['path_image'] . 'carousel';
$R = getFileNames($path); // 오픈하고자 하는 폴더
function getFileNames($directory) {
$valid_formats = array("jpg", "png", "gif");// 그림 확장자 지정
$results = array();
$handler = opendir($directory);
while ($file = readdir($handler)) {
if ($file === "." || $file === "..") continue; // file명이 ".", ".." 이면 무시함
$getExt = pathinfo($file, PATHINFO_EXTENSION); // 파일의 확장자를 구함
if (!empty($getExt)) {
if (in_array($getExt, $valid_formats)) {
$results[] = $file;
}
}
}
closedir($handler);
return $results;
}
?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
for ($i = 0; $i < count($R); $i++) {
if ($i == 0){
echo '<li data-target="#myCarousel" data-slide-to="$i" class="active"></li>';
} else {
echo '<li data-target="#myCarousel" data-slide-to="$i"></li>';
}
}
?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
foreach($R as $key=>$value){
if($key == 0){
echo '<div class="item active">';
} else {
echo '<div class="item">';
}
echo '<img src="'.$g['path_image'].'carousel/'.$value.'" style="width:100%;">';
echo '</div>';
}
?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div> |
부트스트랩이 아닌 경우에는 bxslider 코드에 이미지 자동 읽어오기를 추가한 걸 이용하면 편하다.
http://link2me.tistory.com/1259 참조
bxslider.zip
