네이버지식인에 질의사항이 있어서 간단하게 테스트해본 예제를 첨부한다.
최신버전 다운로드는 https://github.com/stevenwanderski/bxslider-4 에서 한다.
당연히 jQuery도 시간이 지나면서 버전이 업그레이드 되어 왔고, 이에 맞춰 bxslider 역시 jQuery 버전에 맞춰 개발되었을 확률이 높다.
버전에 맞게 하려면 위 사이트에서 파일을 최신버전으로 받고, jQuery 버전은 https://www.w3schools.com/jquery/default.asp 에서 확인하시라.
bxslider.ziphttp://bxslider.com/ 사이트에 받은 파일중에서 필요한 파일만 js, css 폴더에 복사한다.
아래 코드 중에서 색상을 별도 표시한 부분을 중점적으로 보면 금방 이해할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="./js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="./css/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
</head>
<body>
<ul class="bxslider">
<li><img src="./images/img_01.jpg" /></li>
<li><img src="./images/img_02.jpg" /></li>
<li><img src="./images/img_03.jpg" /></li>
<li><img src="./images/img_04.jpg" /></li>
<li><img src="./images/img_05.jpg" /></li>
</ul>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------
<li><img src="./images/img_01.jpg" /></li>
<li><img src="./images/img_02.jpg" /></li>
<li><img src="./images/img_03.jpg" /></li>
<li><img src="./images/img_04.jpg" /></li>
<li><img src="./images/img_05.jpg" /></li>
파일명을 일일이 적기가 귀찮다면 PHP 를 이용해서 해당 폴더 images 를 읽어서 파일 갯수만큼 표시되도록 코드를 만들어도 된다.
<body>
<?php
$path = "./images"; // 오픈하고자 하는 폴더
function getFileNames($directory) {
$results = array();
$handler = opendir($directory);
while ($file = readdir($handler)) {
if ($file != '.' && $file != '..' && is_dir($file) != '1') {
$results[] = $file;
}
}
closedir($handler);
return $results;
}
?>
<ul class="bxslider">
<?php
foreach(getFileNames($path) as $value){
echo '<li><img src="./images/'.$value.'" /></li><\n>';
}
?>
</ul>
</body>
로 코드를 대체하면 된다.
'Web 프로그램 > Layout' 카테고리의 다른 글
| Layout 만들기 예제 -1 (0) | 2018.04.24 |
|---|---|
| div 태그를 이용하여 레이아웃 만들기 (0) | 2018.04.24 |
| [PHP] 현재 디렉토리 경로 설정 (자동인식) (0) | 2017.02.20 |
| 모바일, PC 구분하는 코드 (0) | 2017.02.12 |
| 부트스트랩 테이블 Layout 구조 파악 (0) | 2017.02.01 |
Link2Me