슬라이딩 배너, bxslider로 해결하세요~

bxslider, 여러 슬라이딩 배너효과 스크립트들을 찾아보고해도 이만한 스크립트가 없네요. 왠만한 형태의 슬라이딩 배너는 이거 하나면 끝인거 같군요.

 

 

 

지난번 bxslider게시글에 올린 파일의 수정본을 새로 올릴 겸 추가로, 영역내에 여러 배너를 하나씩 이동시키는 효과를 포함시켰습니다. 그리고, 페이지버튼의 이벤트를 클릭에서 마우스오버로 바꾸었습니다.

 

 

내용요약

 

1. bxslider기본은 페이지버튼에 클릭이벤트가 적용되어있지만, 제가 올린 건 마우스오버이벤트 적용되어 있음.

 

2. 영역안, 여러개의 배너를 하나씩 슬라이딩시키는 효과 추가

 

3. 클릭이나 마우스오버 시 슬라이딩이 아예 멈추는 오류 추가 수정

 

이번에 추가된 내용은 위의 그림 맨 아래쪽 3개의 박스가 한개씩 슬라이딩되는 효과입니다.

 

 

 var slider_03 = $('.bxslider_03').bxSlider({
   auto: true,controls:false,pager:false,maxSlides: 3,moveSlides:1,  slideWidth: 100,slideMargin:0,autoHover:true,
  });

 

소스를 보시면 위와 같이 추가되어있을겁니다. 간단히 설명을 드려보면,

 

maxSlides: 3, -> 영역안의 배너 숫자

moveSlides:1, -> 한개씩 이동하라는 의미

slideWidth: 100, -> 개별배너의 좌우폭

slideMargin:0, -> 배너간의 간격

autoHover:true, -> 오버되어있을때 슬라이딩이 멈춤

 

 

bxslider_sample_new.zip

(첨부파일은 이 게시물에 첨부된 파일이 최신입니다. 참고하세요)

 

말로 설명하는 것보다 직접 숫자를 바꿔가며 해보시는게 100배 빠를겁니다.

 

 

 

 

지난 bxslider 게시물 : http://www.mojimoji.co.kr/604 

 

 

가장보편적인 배너형태추가

sample_more_simple.html

 

 

*추가:방명록 문의 by 지누님 참고파일 첨부

bxslider_sample_jinoo.zip

 

 

 

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