[gabriel] 티에디션 슬라이더 설명 및 질문/답변
티에디션 기초 설정법은 http://wallel.com/223 이 글을 읽어주세요.
현재 티에디션에 사용되는 슬라이더는 Owl Carousel이라는 jQuery 플러그인을 사용하고있습니다. (MIT License)
모바일도 완벽 지원하고, 구버전 IE도 지원하기에 선택했는데요.
이 플러그인은 가벼운데다 기능도 매우 뛰어나고 거기다 수정마저 쉽습니다! (세상에!)
기본 기능은 공식 홈페이지를 가보시면 아주 이해하기 쉽게 데모 페이지들과 그 소스 예제가 존재합니다.
(단 직접 수정할 경우 제가 짜놓은 소스 때문에 꼬일 수 있습니다)
이번에 작성할 가이드는 Gabriel 3.0 에서 사용중인 슬라이더의 소스 설명과 질문/답변입니다.
style.css
#owl-slider { margin-bottom: 30px; }
#owl-slider .item { position: relative; max-height: 400px; overflow: hidden; }
#owl-slider .item .info { position: absolute; bottom: 0; left: 0; padding: 20px; width: 100%; color: #fff; background-color: #000; background-color: rgba(0,0,0,0.4); }
#owl-slider .item img{ display: block; width: 100%; height: auto; }
.owl-wrapper-outer { box-shadow: 0 0 10px #888; }
.owl-slider-text { display: none; }
.tt-edit-canvas .owl-slider-text { display: block; }
@media all and (max-width: 639px){
#owl-slider .item { max-height: none; }
}저는 슬라이더에 owl-slider라는 ID 값을 줬고 제 입맛에 맞게 스타일을 꾸몄습니다.
#owl-slider .item은 슬라이더 아이템 하나하나를 감싸는 레이어의 속성입니다.
높이를 최대 400px만 표시하라고 지정해 두고 그 이상은 overflow: hidden으로 숨겨지도록 했습니다.
높이 400px 이하의 이미지는 그에 맞게 자동으로 높이가 조절됩니다.
#owl-slider .item .info는 item이라는 레이어 안에 글 제목을 뽑아오는 레이어의 속성입니다.
position: absolute로 레이어를 공중에 띄워 바닥에 붙도록 설정하고 width 값을 100%으로 줘 가로 길이를 꽉 차게 맞췄습니다.
background-color가 두개가 있는데요, 앞에 있는건 rgba를 표현할 수 없는 구버전 브라우저를 위해 적었습니다.
#owl-slider .item img는 item 안에 있는 이미지, 즉 슬라이더에 표시될 이미지에 대한 속성입니다.
가로 길이에 100%를 줘 가득 체우고, 높이에 auto를 줘 이미지 크기에 맞게 표시되도록 설정했습니다.
.owl-wrapper-outer는 OWL 슬라이더 자체에서 생성되는 레이어인데요,
슬라이더 상/하에 나오는 그림자 효과를 주기 위해 따로 넣었습니다. 그림자 효과가 싫은 분은 지워도 됩니다.
.owl-slider-text와 .tt-edit-canvas .owl-slider-text는 티에디션 설정 화면에 나오는 경고문구입니다.
실 화면에선 숨겨지고 티에디션 설정 화면에서만 나오게 만들어져있습니다. 이 부분은 지우지 마세요.
마지막으로 @media all and (max-width: 639px) {은 해상도 639px이하 브라우저에서 실행되라 라는 의미를 가진 소스입니다. (반응형 작업할 때 사용되는 소스입니다.)
그 안에 있는 #owl-slider .item은 지정한 해상도에서 item레이어에 앞서 추가한 "최대 높이 제한" 을 풀어 이미지 높이에 맞게 슬라이더가 자동으로 조절되도록 하기 위한 소스입니다.
script
$(document).ready(function() {
$("#owl-slider").owlCarousel({
autoHeight: true,
autoPlay: 5000,
stopOnHover: true,
slideSpeed : 300,
paginationSpeed : 1000,
singleItem:true
});
});| 소스 | 설명 |
|---|---|
autoHeight: true |
높이를 자동으로 맞춥니다. |
autoPlay: 5000 |
5초 뒤에 다음 슬라이더로 넘어갑니다. |
stopOnHover: true |
마우스를 올리면 자동 넘김이 멈춥니다. |
slideSpeed: 300 |
슬라이더가 넘어가는 속도입니다. |
paginationSpeed: 1000 |
네비게이션 버튼을 눌렀을 때 슬라이더가 움직이는 속도입니다. |
singleItem:true |
슬라이더를 하나만 나오도록 하는 설정입니다. |
이렇게 제가 설정한 슬라이더의 설명을 마칩니다.
다음은 사용자 분들의 질문에 대한 답변입니다.
질문이 나오면 답변이 계속 추가됩니다.
Q. 데스크탑에서 나오는 슬라이더 이미지가 상단 기준으로 나오던데, 중앙 기준으로 바꾸고싶어요.
#owl-slider .item { position: relative; max-height: 400px; overflow: hidden; }이 소스를
#owl-slider .item { position: relative; height: 400px; overflow: hidden; }이렇게 바꾸고,
#owl-slider .item img{ display: block; width: 100%; height: auto; }이 소스를
#owl-slider .item img{ position: absolute; top: 0; bottom: 0; margin: auto 0; display: block; width: 100%; height: auto; min-height: 100%; }
이렇게,
@media all and (max-width: 639px){
#owl-slider .item { max-height: none; }
}이 소스를
@media all and (max-width: 639px){
#owl-slider .item { height: auto; }
#owl-slider .item img { position: static; }
}이렇게 바꾸면
데스크탑에선 최대 높이 400px의 이미지가 중앙 기준으로 표시되고,
모바일에선 높이가 이미지에 맞게 자동으로 변합니다.
max-height: none; 가 height: auto; 로 바뀌는 이 부분만 주의하시면 될 듯 합니다.
단점) 데스크탑에서 높이가 400px로 지정되버리기 때문에 그보다 작은 이미지들도 400px 에 맞게 강제로 높이가 조절되어 이미지가 늘어나게 됩니다.