2019. 2. 7. 16:02ㆍ카테고리 없음
실무에서 웹(또는 모바일 웹)을 제작하면서 플러그인을 사용하는 것은 지양한다.
개발자 또는 프론트엔드 개발자라면 슬라이더 정도는 뚝딱? 만들겠지만 그렇지 않은 사람들에게 플러그인은 단비같은 존재가 아닐 수 없다.(혹은 개발이 귀찮은 개발자)
주로 메인 페이지 상단 비주얼을 차지하는 슬라이드 배너(슬라이더 또는 카로셀 이라고도 한다)는 사이트에 접속했을 때 가장 비중있게 비주얼을 차지 하고 있고 사이트의 이미지를 결정짓는 중요한 역할을 한다.
그래서 아래와 같은 조건이 충족 되어야 한다.
1. 버벅임이 없어야 한다.
2. 적당한 애니메이션으로 눈길을 끌어야 한다.
3. 슬라이드 탐색이 간편(직관적)해야 한다.
이런 요구 조건을 모두 충족시키는 슬라이더를 만들기는 쉽지 않다.
플러그인이 차고 넘치는 세상에 공수를 들여서 개발하는 것은 고집이라고 생각한다.
실제로 우리가 아주 잘 알고 있는 네이버의 어떤 스토어에서도 오늘 설명할 플러그인을 사용하고 있다.
하지만 플러그인을 사용할 때 그 플러그인의 라이센스도 같이 알고 써야함은 꼭 명심해야 한다.
라이센스를 위반해서 폭탄을 맞을 수 있으니 조심하자.
왜 Owl Carousel2인가?
검색해 보면 알겠지만 카로셀 플러그인은 많이 있다.
여러 유능한 개발자들이 다양한 플러그인을 개발하고 GITHUB 과 같은 플랫폼을 이용해 발전 시켜 나가고 있다.
하지만 왜 Owl Carousel2(이하 Owl Carousel 이라 하겠다) 일까?
먼저 플러그인을 선정한 기준은 아래와 같다.
1. 커스텀이 쉬워야 한다.
2. 제이쿼리 기반이었으면 한다.
3. 커스텀이 쉬워야 한다.
4. 응용해서 다양한 기능을 만들 수 있어야 한다.
5. 반응형을 지원해야 한다.
6. 터치 인터페이스 친화적이어야 한다.
7. 애니메이션 효과가 다양해야 한다.
8. 커머셜 사용이 가능한 라이센스가 필요하다.
등등
자잘한 이유들이 더 있지만 크게 보자면 그렇다.
Owl Carousel 말고 Slick 이라는 카로셀이 있지만 Owl Carousel 이 훨씬 사용하기 편했던거 같다.
무엇보다 라이센스가 확실치 않았다.
Owl Carousel 설치하기
설치는 간단하다. 먼저 사이트에 접속한다.
(구글에서 검색해 보면 옛날 주소로 검색이 된다. URL이 바껴서 접속이 안될꺼다)
제일 상단에 보면 다운로드 버튼이 있다.
다운로드 해서 압축을 풀면 많은 파일이 있는데 신경쓸 필요는 없다.
그냥 dis 폴더 안에 있는 owl.carousel.min.js(owl.carousel.js) 파일과 dist/assets/ 안에 있는 owl.carousel.min.css(owl.carousel.css) 파일을 복사해서 사용하면 된다.
이전에 새 HTML 파일 생성하기에서 불러오는 방법은 설명했으니 생략 하겠다.
HTML 에서 파일을 불러 왔으면 사용할 모든 준비가 끝난 것이다.
HTML 작성
Owl Carousel은 단순한 엘리먼트 구조를 가진다.
주의할 점은 Carousel 엘리먼트 내부에 구성할 슬라이드(item)가 1개일 경우 슬라이더가 표시 되지 않는다.
슬라이드를 1개만 생성하고 안나온다고 당황하지 말자.
CSS 작성하기
CSS는 슬라이더의 width, 슬라이드의 width와 height 그리고 슬라이드안에 들어가는 콘텐츠의 스타일을 작성하면 된다.
예제용으로 작성하겠다.
슬라이더(.Carousel)은 width를 100%로 설정했다. 높이값을 설정하지 않은 이유는 내부 슬라이더의 높이값을 그대로 받기 때문에 설정하지 않았다.
슬라이드(.item)의 내부에 원하는 이미지 또는 콘텐츠로 채우면된다.
옵션 설정하기
옵션은 "옵션명 : 옵션값"으로 입력하면 된다.
상기 언급한 링크에서 DOCS 메뉴의 API/Options 메뉴에서 모든 옵션을 확인할 수 있다.
기본형으로 설정할 경우 알아야할 옵션은 많지 않다. 차근차근 알아보자.
기본값(Default)을 유지하고자 하는 경우 굳이 입력할 필요는 없다.
items
한 화면에 몇개의 슬라이드를 표시할지 설정하는 옵션이다.
3개를 표시하고 싶으면 items:3 이라고 작성하면 된다.
margin
CSS의 마진값과 같다고 보면 된다.
2개 이상의 슬라이드를 한 화면에 표시할 때 슬라이드간의 간격을 설정하는 옵션이다.
숫자만큼의 PX 여백이 생긴다.
loop
슬라이더의 loop를 설정하는 옵션이다.
false 혹은 true로 설정하며 false의 경우 마지막 슬라이드에서 더이상 슬라이드 되지 않는다.
무한으로 슬라이드 되게 하고 싶으면 true로 설정하면 된다.
center
슬라이드는 기본적으로 좌측에 정렬된다.
기본은 false고 중앙정렬을 하고싶으면 true 값을 입력하면 된다.
mouseDrag
마우스 드레그로 슬라이드를 넘길 수 있는 옵션이다.
웹에서 마우스로 슬라이드를 넘기는건 불편한 행동이므로 쓸일이 별로 없는 옵션이라 할 수 있다.
기본 true로 적용 되어 있다. 빼고 싶을 경우 false를 입력한다.
touchDrag
터치 앤 스와이프로 슬라이드를 넘길 수 있는 옵션이다. 기본 true로 적용이 되어 있다.
모바일에서는 필수 이므로 모바일 웹에서 사용할 경우 입력을 안하면 되고 특별히 빼야 한다면 false를 입력하면 된다.
nav
네비게이션 인터페이스를 표시하는 옵션인다.
기본은 false로 표시되지 않는다. 이전과 다음 슬라이드 버튼을 표시하고 싶으면 true 값을 입력하면 된다.
하지만 기본값의 아이콘은 디자인이 별로기때문에 추천하지는 않는다.
※다른 포스팅으로 다룰 계획이니 참고 하면 된다.
autoplay
일정 시간이 지나면 자동으로 슬라이드를 넘길 수 있는 옵션이다.
자동으로 넘기고 싶을 경우 true를 입력한다.
autoplayTimeout
오토플레이를 설정했을 경우 자동으로 넘어가는 시간을 설정하는 옵션이다.
기본값으로 5000이 설정되어 있으며 ms 단위로 원하는 숫자만 입력하면 된다.
autoplayHoverPause
오토플레이를 설정했을 경우 마우스를 올렸을때 오토플레이를 중지하는 옵션이다.
PC 웹에서는 필수인 기능이라고 할 수 있다.
responsive
반응형 웹일 경우 브라우저의 크기에 따라 옵션을 설정할 수 있는 옵션이다.
미디어쿼리와 개념이 동일하다.
옵션값이 있는 옵션이 아니라 이 옵션 안에 다른 옵션을 넣는 개념이다.
이런식으로 입력이 되는데 0, 600, 1000은 width의 px 값이다.
브라우저의 width가 해당 px에 도달하면 옵션이 달리 적용 된다.
반응형일때는 유용한 기능이다.
jquery(js) 설정하기
제이쿼리도 단순한 구조로 작성이 된다.
슬라이더 클래스는 HTML 마크업에서 설정한 클래스명을 쓴다.
예제에서는 .Carousel을 사용했다.(상단의 HTML 작성 부분 참고)
이제 { }안에 원하는 옵션을 ,(콤마)로 구분하여 입력하면 된다.
가장 기본적인 슬라이더의 모습을 설정해 봤다.
한 슬라이더에 1개의 슬라이드가 꽉차게 표시되고 5초에 한번씩 슬라이드가 이동되며 슬라이드가 무한으로 연결된다.
예제 보기
이제 잘 작동한다.
이번 포스팅에서는 기본형을 만드는 것이 목표 였기 때문에
다른 기능을 원한다면 Owl Carousel의 DOCS를 참고 하면 된다.
여러 응용 기능은 차근차근 포스팅 하도록 하겠다.
출처 : https://blog.naver.com/cyh21050/220936769178