티스토리 반응형 스킨 | JB Simple White For Tistory > V0.3.1 이하 > 슬라이더 사용법

JB Skin 101로 이름을 바꾸어 개발합니다.

슬라이더 사용하기, 사용하기 않기

skin.html에 다음과 같은 코드가 있습니다.

var jbShowSlider = 0;

빨간 부분을 0으로 하면 사용하고, 1로 하면 사용하지 않습니다.

슬라이더 기본

슬라이더 이미지는 다음과 같은 코드로 만들어집니다.

jbSliderImg[0] = './images/slider-01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';

빨간색 숫자가 슬라이더 번호입니다. 0이면 첫번째 슬라이더, 1이면 두번째 슬라이더, n이면 n+1번째 슬라이더입니다.

jbSliderImg에는 이미지  경로, jbSliderLink에는 이미지에 걸 링크 주소, jbSliderCaption에는 이미지에 오버레이될 문구를 넣습니다.

jbSliderImg의 값은 필수지만 나머지는 선택사항입니다. 만약 링크와 캡션을 사용하지 않는다면 다음과 같이 하면 됩니다.

jbSliderImg[0] = './images/slider-01.png';
jbSliderLink[0] = '';
jbSliderCaption[0] = '';

슬라이더 이미지 변경하기

두번째 슬라이더 이미지를 abc.png로 변경하고 싶다면...

[HTML/CSS 편집]의 [파일 업로드] 탭에서 abc.png를 업로드합니다.

skin.html에서

jbSliderImg[1] = './images/slider-02.png';

를 다음과 같이 변경합니다.

jbSliderImg[1] = './images/abc.png';

이미지를 변경할 때는 기존 이미지와 같은 이름을 사용하지 않는게 좋습니다. 서버의 캐시 설정때문에 기존 이미지가 계속 나올 수 있습니다.

슬라이더 이미지 추가하기

스킨에는 3개의 이미지가 등록되어 있습니다. 만약 하나 더 추가하고 싶다면 다음과 같이 빨간색 코드를 추가합니다.

jbSliderImg[0] = './images/slider-01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';
jbSliderImg[1] = './images/slider-02.png';
jbSliderLink[1] = '#';
jbSliderCaption[1] = '<h3>Phasellus lacinia</h3>';
jbSliderImg[2] = './images/slider-03.png';
jbSliderLink[2] = '#';
jbSliderCaption[2] = '<h3>Aenean et nibh</h3>';
jbSliderImg[3] = './images/slider-04.png';
jbSliderLink[3] = '#';
jbSliderCaption[3] = '<h3>Aenean et nibh</h3>';

슬라이더 이미지 삭제하기

예를 들어 두번째 슬라이더를 삭제한다면...

빨간색 코드를 삭제합니다.

jbSliderImg[0] = './images/slider-01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';
jbSliderImg[1] = './images/slider-02.png';
jbSliderLink[1] = '#';
jbSliderCaption[1] = '<h3>Phasellus lacinia</h3>';
jbSliderImg[2] = './images/slider-03.png';
jbSliderLink[2] = '#';
jbSliderCaption[2] = '<h3>Aenean et nibh</h3>';

그리고 번호가 연속이 되도록 수정합니다.

jbSliderImg[0] = './images/slider-01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';
jbSliderImg[1] = './images/slider-03.png';
jbSliderLink[1] = '#';
jbSliderCaption[1] = '<h3>Aenean et nibh</h3>';

Created on 2015-03-11 16:34 | Updated on 2017-03-26 19:58

이 글을 공유하기

Kakao

티스토리 스킨

Book navigation