코딩스쿨

이미지 슬라이더

텍스트 효과

BX 슬라이더(bx Slider)

1. 데모

2. 데모 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css" type="text/css">
<script>
$(document).ready(function () {
    $(".bxslider").bxSlider( {
        controls: true,
        auto: true,
        autoControls: true,
        slideWidth: 800,
        pager: true
    });
});
</script>
</head>
<body>
        <ul class="bxslider">
            <li><img src="images/slide1.jpg" title="눈오는 풍경 1"></li>
            <li><img src="images/slide2.jpg" title="눈오는 풍경 2"></li>
            <li><img src="images/slide3.jpg" title="눈오는 풍경 3"></li>
            <li><img src="images/slide4.jpg" title="눈오는 풍경 4"></li>
            <li><img src="images/slide5.jpg" title="눈오는 풍경 5"></li>
        </ul>
</body>
</html>

3. 플로그인 URL(파일 다운로드)

https://bxslider.com/install/

기본 사용법
옵션 설정

1. 제이쿼리를 불러온다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

2. 다운로드 받은 압축 파일을 풀어서 dist 폴더에 있는 jquery.bxslider.min.js 파일을 작업폴더 내 js 폴더에 복사하고 jquery.bxslider.css 파일은 HTML과 같은 폴더에 복사한다.

3. 플러그인의 js와 css 파일을 불러온다.
<script src="js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="jquery.bxslider.css" type="text/css">

4. 데모 소스를 참고하여 HTML과 CSS를 작성한다.

5. 제이쿼리 ready() 메소드 내에서 플러그인의 bxSlider() 메소드를 실행한다.
<script>
$(document).ready(function () {
    $(".bxslider").bxSlider( {
        auto: true,
        autoControls: true,
        stopAutoOnClick: true,
        slideWidth: 800,
    });
});
</script>

    $(".bxslider").bxSlider( {
        auto: true,
        autoControls: true,
        stopAutoOnClick: true,
        slideWidth: 800,
    });

- controls : 이전/다음 버튼 생성
- auto : 자동 슬라이드 전환
- autoControls : 시작/멈춤 버튼 생성
- slideWidth : 슬라이드 이미지의 너비
- pager : 슬라이드 하단 불릿(동그라미 점) 생성