bxslider slider

bxslider slider

bxslider

개인적으로 이미지 슬라이더중 젤 괜찮다고 생각하는 bxslider slider

bxslider slider 사용법을 알아보자

일단 bxslider를 홈페이지에서 다운받자

http://bxslider.com/

1 단계 : 링크 파일을 설정해줍니다.

<!-- 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" />

2 단계 : HTML 마크 업 만들기

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

3 단계 : bxSlider 호출하기

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

다음은 bxSlider 예제를 살펴보겠습니다.