bxslider 왠만한 슬라이딩 배너는 이거면 충분!

슬라이딩 배너를 찾다보니 bxslider란 소스가 가장 유명한거 같더군요. 처음 사용법을 파악하는데 시간이 좀 걸리긴했지만 정리가 어느정도 되니 나름 쓸모가 있네요. 왠만한 쇼핑몰에 쓰이는 배너는 이 소스하나면 거의 다 해결할 수도 있어뵙니다.

 

 

 

위의 옥션 예처럼 좌우 화살표버튼과 아래 텝버튼이 함께 적용된 것 역시 충분히 가능합니다.

 

 암튼, 슬라이딩 효과 배너 하나 만들기 위해 저처럼 찾는데 엄청 고생할 분들 공유해봅니다.

 

 

프로그래머들이야 새로하나 쉽게 만들 수도 있겠지만, 저처럼 공개소스 퍼다가 사용하는 사람은 간단한거 조금 변경하려고 해도 작동이 안되거나하는 소스들이 많아 늘 고생이죠.

 

일단, 여러기능이 많지만 제가 정리해놓은 배너는 딱 3가지형태입니다. 가능 흔하고 가장 많이 사용되어지는 형태가 아닐까 싶네요. 물론 기본에서 응용을 하면 다양한 레이아웃으로 변형도 가능합니다. (중급이상정도라면 자유자재로 바꿀수 있을듯)

 

 

 

가장 흔히 보이는 형태는 맨 위와 맨 아래 형태일거 같군요. 특히 맨아래의 경우 아래 숫자버튼의 모양과 위치를 자유롭게 변경할 수가 있어서 텝형식의 다양한 레이아웃으로도 변형/사용 할 수 있습니다.

 

 

 

bxslider 슬라이딩이 멈추는 오류해결 스크립트 포함

액션버튼을 클릭하면 슬라이딩이 멈추는 현상이 있어 글을 뒤져봤더니 역시나 사용하는 사람이 많다보니 해결법 또한 쉽게 구했습니다. 역시 소스안에 포함시켜 놓았으니 찬찬히 보고 그대로 사용하시면 됩니다.

 

압축파일 다운로드

bxslider_슬라이딩배너.zip

 

[필독] 소스 중 오류가 있어 수정이 필요합니다.

  $(document).on('click','.bx-next, .bx-prev, #bx-pager1',function() {

-->>>  $(document).on('click','.bx-next, .bx-prev,  .bx-pager, #bx-pager1',function() {

 

 

bxslider라는 소스의 장점은 왠만한 기능들이 거의 포함되어 있다는데 있습니다. 홈페이지를 둘러보니 제가 첨부한 파일의 효과나 기능말고도 다양하게 변형 사용할 수 있다고 하니 더 찾아보실 분들은 아래 사이트에 직접 방문해보시는것도 좋을거같네요.

 

소스출처

http://bxslider.com/

 

 

 

파일과 내용이 추가되어 새 게시물에 담아놓았습니다. 꼭 확인해보세요~!

http://www.mojimoji.co.kr/629

 

 

공감 하트 버튼 눌러주실꺼죠?