API

 

플러그인을 우리가 조작할 수 있게 만들어 놓은 것.

open API ex) 네이버지도, sns로 로그인하기, 타 사이트에서 sns 좋아요 누르기 등

 

owl carousel에 옵션, 메소트, 콜백이 있다.

 

 

 

 

 

 

1. option

 

owl-carousel 함수 실행에 객체형태로 매개변수로 들어가 여러가지 선택사항들을 마음에 드는 대로 바꾸는 것.

 

 

https://owlcarousel2.github.io/OwlCarousel2/ 접속 -> 상단의 Docs -> API의 option

 

많은 종류의 옵션이 있다.

{해당 옵션의 이름 : 원하는값 , 해당 옵션의 이름 : 원하는 값 .. } 의 형태로 사용한다  

 

 

 

 

 

(예)

 

 

 

*responsive : 반응형. 사이즈마다 원하는 옵션을 넣을 수 있다.

 

 

1000~

 

 

 

600 ~ 1000

 

 

~ 600

 

 

 

 

 

 

 

 

 

2. event

 

class owl-carousel 과 상관없는 태그를 이용하여 owl carousel을 조작하는 것

 

or

 

어떤 이벤트가 일어났을 때의 값을 반환하는 것

 

or

 

해당 이벤트가 일어 났을 때 할 행동을 설정하는 것  

 

(+) call back

 

Owl Carousel 홈페이지 -> 상단의 Docs -> API -.> event

 

 

 

 

 

- 맨 아래에 많은 종류의 이벤트들이 있다

parameter, callback, type 이 나와있다.

 

 

 

 

 

ex)

type :

callback :

parameter :

 

 

 

 

1) 이벤트 감지하기

 

 

 

 

 

 

 

 

 

 

2) 상관 없는 태그로 이벤트 실행시키기

 

( 매개변수 형태 지켜야 한다 )

 

 

 

 

 

 

 

 

 

 

* 특정 기능 가진 슬라이드 만들면서 callback, event data 익히기 *

 

<HTML & CSS 변경 >

 

아래의 내용으로 10페이지 만들었다.

 

 

opacity : .1

 

 

<화면>

 

 

 

 

 

 

callback과 data 사용하며

페이지를 넘길 때마다 숫자가 순서대로 연이어 선명해 지면서 내려오게 하기.

 

 

 

 

3. 데이터 받아오기 (call back)

함수에서 매개변수 event를 이용하여 현재 상황에 대한 이벤트를 받을 수 있다.

 

* 사용해서 함수 만들기 *

 

 

 

 

 

 

4. callback

owlCarousel 함수 호출 할때 매개변수로 옵션을 넣은 것 처럼 callback을 이용하여 함수를 실행 할 수 있다 .

 

owl carousel event 페이지 맨 아래에 여러가지 이벤트가 나와 있는 곳에 callback 형태가 나와 있다.

 

callback (감지할 이벤트) : 실행할 함수

 

 

 

 

 

 

 

 

 

 

 

 

 

<js>

 

 

 

 

 

 

 

 

 

'프론트엔드 > ㄴplugin' 카테고리의 다른 글

<plugin> Owl Carousel2 (1) 시작하기  (0) 2017.08.25
<plugin> bxslider(1) -설치, 실행  (0) 2017.08.25
<plugin> plugin  (0) 2017.08.25

Owl Carousel : 슬라이드 플러그인  

 

https://owlcarousel2.github.io/OwlCarousel2/

 

 

 

 

 

 

 

 

 

사용하기

 

1. 홈페이지 접속

https://owlcarousel2.github.io/OwlCarousel2/

 

 

 

 

 

2. 다운로드

 

 

 

- 다운로드된 폴더

필요한 파일들을 모아서 정리하기.

 

 

-> docs로 들어가기

 

 

 

 

-> asset

 

 

 

 

 

-> owlcarousel

 

-> js파일 복사해서 원하는 폴더에 넣기

 

 

 

-> assets

 

 

 

 

-> css, theme.css 파일 외에 원하는 것 골라 파일에 넣기.

 

 

 

 

 

 

3.파일 연결하기

 

-Docs

 

 

 

 

 

- Installation

 

 

 

 

 

 

 

- 아래의 내용 따라서 파일 연결하면 된다.

 

 

 

 

 

 

 

 

4. HTML, CSS 설정하기 , owl-carousel 실행

 

아래의 내용 따라 HTML, CSS 설정, owl-carousel 불러온다.

 

 

 

 

 

<HTML>

 

버튼 테그를 추가하고 원하는 형태로 변형시켰다.

 

 

 

 

<CSS>

 

 

 

-> 여기까지는 화면에 CSS 가 나타나지 않는다 ( class 가 owl-carousel인 태그)

 

 

 

 

- owlCarousel 함수 실행

 

 

 

 

 

 

 

커서로 드래그 하면 옆으로 돌아가는 슬라이드.

'프론트엔드 > ㄴplugin' 카테고리의 다른 글

<plugin> Owl Carousel (2) -API  (0) 2017.08.25
<plugin> bxslider(1) -설치, 실행  (0) 2017.08.25
<plugin> plugin  (0) 2017.08.25

* 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. 홈페이지 접속

 

http://bxslider.com/

 

 

 

 

 

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

 

 

 

 

 

2. 다운로드

 

 

 

 

- 다운로드한 파일

 

 

 

 

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

 

 

 

 

 

 

3. 파일 연결하기

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

 

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

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

 

 

 

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

 

 

 

 

 

4. HTML, CSS파일 만들기

 

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

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

 

 

<HTML>

 

 

<CSS>

 

 

<여기까지 했을 때 화면>

 

 

 

5. bxslider 불러오기

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

옵션

 

 

: 적용할 수 있는 선택사항

 

 

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

 

 

 

 

 

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

 

 

 

 

'프론트엔드 > ㄴplugin' 카테고리의 다른 글

<plugin> Owl Carousel (2) -API  (0) 2017.08.25
<plugin> Owl Carousel2 (1) 시작하기  (0) 2017.08.25
<plugin> plugin  (0) 2017.08.25

 

* 플러그인 *

 

( 제이쿼리 플러그인 )

 

: 이미 누군가 만들어 놓은 기능을 쉽게 가져다가 사용할 수 있게 해 놓은 파일들

 

 

 

 

사용방법 

 

1) 기능검색 ex) 슬라이드, 메뉴, 탭, 패럴럭스, 메이슨리.. ( 영어로 구글검색 하는게 좋다)

2) 다운로드

3) 내 환경에 맞춰 설청 (HTML, CSS, js, 폴더구조 . )

4) 실행

'프론트엔드 > ㄴplugin' 카테고리의 다른 글

<plugin> Owl Carousel (2) -API  (0) 2017.08.25
<plugin> Owl Carousel2 (1) 시작하기  (0) 2017.08.25
<plugin> bxslider(1) -설치, 실행  (0) 2017.08.25

+ Recent posts