bxslider
bxslider 적용에 필요한 css 와 jquery 추가해주기
파일로 다운받아서 추가하거나 주소를 복사 붙여넣기해서 추가하는 방식 둘 중에 선택해서 사용
슬라이더 크기 조절
슬라이더 div를 div로 한번 더 감싸주고 크기를 지정
bxslider 세부 속성
auto / speed / pause / autoControls / pager / captions / mode
auto : 슬라이드 자동 전환
speed : 슬라이드 전환 속도
pause : 슬라이드 정지 시간
autoControls : 재생 제어창 추가
재생 제어창을 추가할 경우 작업물의 css폴더에 bxslider의 이미지스프라이트를 반드시 추가해주어야 한다.
bxslider 폴더 ▶ dist 폴더 ▶ images 폴더를 복사
작업물의 css 폴더 ▶붙여넣기
pager : 페이지 바로가기 버튼 (슬라이드 아래 점)
captions : 슬라이드 설명
캡션을 사용할 경우 각 슬라이드의 이미지를 div로 감싸주어야 하고
이미지의 title 속성의 값을 주어서 설명을 추가할 수 있다.
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 |