제이쿼리 슬라이드 (bxSlider)

 

 

 

제이쿼리 슬라이더 플러그인 bxSlider

사이트를 만들다 보면 기본적으로 많이 사용하는 이미지를 슬라이드 시키는 슬라이더나 메뉴, 레이어 팝업 등은 사용하는 플러그인들이 픽스가 되는데요~!! 오늘 부터 제가 자주 사용하는 플러그인들을 하나씩 소개해 드릴까 합니다.
먼저 소개해드릴 제이쿼리 플러그인은 슬라이더인데요~
bxSlider는 옵션도 깔끔하고 반응형으로도 확장이 가능해서 자주 사용하고 있습니다.

bxSlider는 Steven Wanderski라는 분이 2014년에 제작한 제이쿼리 슬라이더로 http://bxslider.com 에서 자세한 설치방법과 markup을 확인하실 수 있습니다. (영어 울렁증 주의요망.. 또르르)
그럼 지금부터 사이트 가서 보기도 귀찮다~~ 싶으신분들을 위해서 하단에 플러그인 다운로드를 링크하고 간단한 사용법을 설명드리겠습니다.

 

 

설치법과 마크업

<!-- 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="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />

먼저 head 사이에 제이쿼리와 하단에 첨부해드린 파일에 bxslider js파일과 스타일시트를 링크시켜줍니다.

 

 

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

그리고 body 사이에 비순차목록으로 bxslider를 클래스로해서 이미지를 올려줍니다.

 

 

<script>
  $(document).ready(function(){
    $('.bxslider').bxSlider();
  });
</script>

마지막으로 스크립트를 설정해 줍니다. 여기에 옵션을 넣어서 컨트롤러나 스피드 등을 조절할 수 있는데 관련 내용은 http://bxslider.com/options 에서 확인이 가능하십니다. (옵션들이 많아서 여기에 써놓긴 힘들듯하네요)

옵션값들은 하단에 링크된 페이지에서 확인하시구요.
저는 옵션값들 적용하는 예제만 추가로 남기고 오늘은 포스팅을 정리하도록 하겠습니다.
궁금하신 분들은 파일 다운받아서 테스트 한번씩 해보세요.

 

 

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({

     auto: true,                  // 자동넘어가기 여부
     autoStart: true,            // 자동시작 여부(false일경우 start클릭시 슬라이드시작)
     autoControls: false,       // 시작/멈춤 버튼 노출 여부
     autoHover : true,           // 마우스 오버시 정지 여부
     pause: 3000,               // 자동 전환사이의 시간
     pager: true,              // 현재 페이지 버튼 노출 여부
     infiniteLoop: true,        // 마지막이미지에서 다음버튼 클릭시 처음이미지
     controls: true,           // 이전/다음 버튼 노출 여부
     mode:'fade',             //horizontal, fade, vertical
     slideWidth: 1000,       //슬라이더 크기

 });
});
</script>

 

 

https://bxslider.com/options/

jquery.bxslider.zip

0.03MB