<plugin> bxslider(1) -설치, 실행

2017. 8. 25. 17:32

* bxslider *

(http://bxslider.com/)

1. 반응성이 좋다

2. 수직의, 수평의, 사라지는 모드의 애니메이션 제공

3. 슬라이드는 이미지, 비디오, 단순HTML을 가질 수 있다

4. touch와 swipe( 터치디바이스에서 옆으로 미는 것) 제공

5. CSS의 transition을 사용한다 ( 반응성 높음)

6. 충분한 callback API과 방법들

7. 파일사이즈가 작고, 테마가 많고, 시행하기 간단하다

8. Firefox, Chrome, Safari, IOS, Anderoid, IE7+지원

9. 환경설정 가능하다.

사용하기

1. 홈페이지 접속

* 홈페이지 메인화면 맨 아래에 사용방법 나와있음*

2. 다운로드

- 다운로드한 파일

- 필요한 파일만 골라서 원하는 폴더에 정리해둔다

3. 파일 연결하기

(jQuery가 설치되어 있어야 한다. 없으면 설치해서 연결하기 )

맨 위의 줄은 jQuery를 연결하는 코드이다

아래의 두 줄 복사해서 index.html에 옮기기

css연결코드는 어디에 있어도 관계 없으나 js파일은 jquery파일 연결코드보다 아래에 넣어야 한다.

4. HTML, CSS파일 만들기

-아래의 내용 복사하여 원하는 형태로 정리한다

< ul class="bxslider"> 과 li태그이면 된다.

<HTML>

<CSS>

<여기까지 했을 때 화면>

5. bxslider 불러오기

- 아래의 내용 복사하여 js 파일에 넣기

옵션

: 적용할 수 있는 선택사항

1. 홈페이지의 상단메뉴에서 Option

2. 원하는 옵션의 원하는 옵션값으로 객체 형태로 매개변수로 보내면 된다.

공부기록