이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[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 .infoitem이라는 레이어 안에 글 제목을 뽑아오는 레이어의 속성입니다.

position: absolute로 레이어를 공중에 띄워 바닥에 붙도록 설정하고 width 값을 100%으로 줘 가로 길이를 꽉 차게 맞췄습니다.

background-color가 두개가 있는데요, 앞에 있는건 rgba를 표현할 수 없는 구버전 브라우저를 위해 적었습니다.


#owl-slider .item imgitem 안에 있는 이미지, 즉 슬라이더에 표시될 이미지에 대한 속성입니다.

가로 길이에 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 에 맞게 강제로 높이가 조절되어 이미지가 늘어나게 됩니다.

티스토리 툴바