xe 위젯 개발 강좌 (3) - bxslider 를 이용한 위젯만들기 준비

bx슬라이더를 이용해서 xe 위젯만들기 작업을 시작해봅니다.

먼저 http://bxslider.com/ 접속해서 bxslider를 다운로드 받습니다. bxslider 사이트에 많은예제가 잘 나와있어서 쉽게 bxslider를 파악할 수 있습니다.

다운로드를 받은 후 웹루트에 올려놓고 살펴보면 되지만 여기서는 깔끔하게 정리를 하기 위해서 bxslider 폴더를 하나 만들어서 테스트해보려고 한다.

그럴려면 소스에 나오는 경로에 맞게 이미지와 js,css를 bxslider 폴더를 만든후 그 밑에 js,css 폴더를 만들어 넣어야 한다.

어느정도 정리가 된 후 봤을때 잘나온다면 준비는 다 됬다.

<!-- 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="lib/jquery.bxslider.css" rel="stylesheet" />

<ul class="bxslider">

  <li><img src="images/pic1.jpg" title="Funky roots"/></li>

  <li><img src="images/pic2.jpg" title="Funky roots1"/></li>

  <li><img src="images/pic3.jpg" title="Funky roots2"/></li>

</ul>

<script>

$('.bxslider').bxSlider({

  mode: 'fade',

  captions: true,

  auto: true,

  pause: 2000

});

</script>

우선 이렇게 했을때 잘나오는지 확인한다. 잘 나온다면 이 상태 그대로 앞에서 배운 xe위젯 형식에 맞게 적용해본다.