[Gabriel 4.0] 슬라이더 설정 방법
2016. 6. 25. 16:33,
티스토리/gabriel,
Gabriel 스킨이 4.0 으로 업그레이드 되면서 티에디션 부분이 전부 수정되었습니다.
그 중 슬라이더는 티에디션에서 빠져나오게 됐죠.
슬라이더를 추가하려면 수동으로 소스를 넣어야합니다.
이 글을 천천히 잘 보고 따라해주세요 !
skin.html
38번째 줄 부터 75번째 줄 까지 다음 소스가 있습니다.
var slider = true; // true / false
var data = { sliderList: [
{
type: "type1",
title: "슬라이더 type1",
desc: "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/234DD83B56193A5E13"
},
{
type: "type2",
title: "슬라이더 type2",
desc: "남산위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/231DAE3A56193A3A04"
},
{
type: "type3",
title: "슬라이더 type3",
desc: "가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편 단심일세",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/271B5D3756193A190F"
},
{
type: "type4",
title: "슬라이더 type4",
desc: "type4 는 배경 이미지만 출력합니다.",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/270C3D455617C80F1E"
},
{
type: "type5",
title: "슬라이더 type5",
desc: "이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라사랑하세",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/264246455584EFED27"
}
] };
var slider = true; // true / false
는 슬라이더를 켜고 끌 수 있는 기능입니다. true
는 슬라이더를 켜고, false
는 슬라이더를 끕니다.
그 밑줄의 var data
는 슬라이더 개수를 추가하거나 설정을 변경할 수 있습니다.
코드 | 설명 |
---|---|
type |
데모 블로그를 보시고 type1 ~ 5 를 선택하여 작성해주세요. |
title |
슬라이더에 표시되는 제목입니다. type4 의 경우 출력되지 않습니다. |
desc |
슬라이더에 표시되는 내용입니다. 마찬가지로 type4 의 경우 출력되지 않습니다. |
url |
제목 및 내용을 클릭했을 때 이동하는 링크입니다. 원하는 곳으로 이동할 수 있습니다. (현재창으로 이동됩니다) |
image |
슬라이더의 배경으로 들어가는 이미지입니다. 외부 이미지를 넣기보다, 포스트에 포함된 이미지의 주소를 넣는걸 추천합니다. |
슬라이더 개수 추가
슬라이더 개수를 기존 5개보다 더 추가하려면
{
type: "type5",
title: "슬라이더 type5",
desc: "이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라사랑하세",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/264246455584EFED27"
}
이 부분만 복사해서 붙여넣으면 됩니다.
단, 여기서 주의하셔야 할 부분은
{
type: "type4",
title: "슬라이더 type4",
desc: "type4 는 배경 이미지만 출력합니다.",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/270C3D455617C80F1E"
},
{
type: "type5",
title: "슬라이더 type5",
desc: "이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라사랑하세",
url: "#",
image: "https://t1.daumcdn.net/cfile/tistory/264246455584EFED27"
}
이렇게 이전 슬라이더와 새로 추가된 슬라이더 사이에 콤마(,) 가 반드시 들어가야합니다.