bxslider

bxslider 예시

 

 

bxslider 적용에 필요한 css 와 jquery 추가해주기

파일로 다운받아서 추가하거나 주소를 복사 붙여넣기해서 추가하는 방식 둘 중에 선택해서 사용

 

파일형식
주소 링크 형식

 

 

슬라이더 크기 조절

슬라이더 div를 div로 한번 더 감싸주고 크기를 지정

 

 

 

bxslider 세부 속성

auto / speed / pause / autoControls / pager / captions / mode

 

 

auto : 슬라이드 자동 전환

 

 

 

speed : 슬라이드 전환 속도

 

 

 

pause : 슬라이드 정지 시간

 

 

 

autoControls : 재생 제어창 추가

재생 제어창을 추가할 경우 작업물의 css폴더에 bxslider의 이미지스프라이트를 반드시 추가해주어야 한다.

 

bxslider 폴더 ▶ dist 폴더 ▶ images 폴더를 복사

작업물의 css 폴더 ▶붙여넣기

false로 지정하면 재생제어창 제거

 

 

 

pager : 페이지 바로가기 버튼 (슬라이드 아래 점)

true로 지정하면 점 보이기

 

 

 

captions : 슬라이드 설명

캡션을 사용할 경우 각 슬라이드의 이미지를 div로 감싸주어야 하고

이미지의  title 속성의 값을 주어서 설명을 추가할 수 있다.

false로 지정하면 캡션 사용X

 

 

 

 

mode : 슬라이드 전환 방식

기본값은 좌우 전환이고 vertical 로 지정해주면 위아래로 전환된다.

 

 

'공부' 카테고리의 다른 글

36일차_ jQuery (4)  (0) 2021.02.24
35일차_ jQuery (3)  (0) 2021.02.23
30일차_ jQuery (2)  (0) 2021.02.16
29일차_ jQuery (1)  (0) 2021.02.15
28일차_JavaScript(8)  (0) 2021.02.10

UI 플러그인

 

ui 제이쿼리 추가해주기
드래그 기능

 

 

 

ui css 추가해주기
달력 날짜 선택

 

 


 

쿠키 플러그인

쿠키 제이쿼리 추가해주기

 

쿠키 생성

'공부' 카테고리의 다른 글

37일차_ jQuery (5)  (0) 2021.02.25
35일차_ jQuery (3)  (0) 2021.02.23
30일차_ jQuery (2)  (0) 2021.02.16
29일차_ jQuery (1)  (0) 2021.02.15
28일차_JavaScript(8)  (0) 2021.02.10

리사이즈 이벤트

 


마우스휠 이벤트

 

마우스휠 이벤트 사용시 마우스휠이벤트 제이쿼리 추가해주기

 

 

마우스 휠 방향 입력시에는 delta 써주기

 

휠 방향이 위쪽일 때는 배경색 빨강 / 아래쪽일 때는 파랑

 

'공부' 카테고리의 다른 글

37일차_ jQuery (5)  (0) 2021.02.25
36일차_ jQuery (4)  (0) 2021.02.24
30일차_ jQuery (2)  (0) 2021.02.16
29일차_ jQuery (1)  (0) 2021.02.15
28일차_JavaScript(8)  (0) 2021.02.10

이벤트, 애니메이션 관련 함수

드랍다운 메뉴

slideUp, SlideDown

 

슬라이드

animate (가로, 세로)

fadeIn, fadeOut (페이드 방식)

 

탭메뉴

hide, show, eq, index

 

탭메뉴 (on, off)

addClass, hasClass, removeClass

 

팝업창

hide, show, eq

 


 

 

 

'공부' 카테고리의 다른 글

36일차_ jQuery (4)  (0) 2021.02.24
35일차_ jQuery (3)  (0) 2021.02.23
29일차_ jQuery (1)  (0) 2021.02.15
28일차_JavaScript(8)  (0) 2021.02.10
27일차_JavaScript(7)  (0) 2021.02.09

+ Recent posts