티스토리 반응형 스킨 | JB Magazine For Tistory > Tips > 슬라이더 사용법

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

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

var jbShowSlider = 0;

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

슬라이더 기본

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

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

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

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

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

jbSliderImg[0] = './images/jbSlider01.png';
jbSliderLink[0] = '';
jbSliderCaption[0] = '';

슬라이더 이미지 변경하기

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

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

skin.html에서

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

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

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

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

슬라이더 이미지 추가하기

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

jbSliderImg[0] = './images/jbSlider01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';
jbSliderImg[1] = './images/jbSlider02.png';
jbSliderLink[1] = '#';
jbSliderCaption[1] = '<h3>Phasellus lacinia</h3>';
jbSliderImg[2] = './images/jbSlider03.png';
jbSliderLink[2] = '#';
jbSliderCaption[2] = '<h3>Aenean et nibh</h3>';
jbSliderImg[3] = './images/jbSlider04.png';
jbSliderLink[3] = '#';
jbSliderCaption[3] = '<h3>Aenean et nibh</h3>';

슬라이더 이미지 삭제하기

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

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

jbSliderImg[0] = './images/jbSlider01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';
jbSliderImg[1] = './images/jbSlider02.png';
jbSliderLink[1] = '#';
jbSliderCaption[1] = '<h3>Phasellus lacinia</h3>';
jbSliderImg[2] = './images/jbSlider03.png';
jbSliderLink[2] = '#';
jbSliderCaption[2] = '<h3>Aenean et nibh</h3>';

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

jbSliderImg[0] = './images/jbSlider01.png';
jbSliderLink[0] = '#';
jbSliderCaption[0] = '<h3>Lorem ipsum</h3>';
jbSliderImg[1] = './images/jbSlider03.png';
jbSliderLink[1] = '#';
jbSliderCaption[1] = '<h3>Aenean et nibh</h3>';

Created on 2015-03-07 16:39 | Updated on 2016-03-23 20:04

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Comments

슬라이드를 클릭했을 때, 새창으로 띄우는 방법은 어떻게 하나요?

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

for ( var i = 0; i < jbSliderLink.length; i++) {
  $( '#jbSlider' ).append( '<a href="' + jbSliderLink[ i ] + '"><img src="' + jbSliderImg[ i ] + '" title="' + jbSliderCaption[ i ] + '"></a>' );
}

다음처럼 빨간색 코드를 추가해보세요.

for ( var i = 0; i < jbSliderLink.length; i++) {
  $( '#jbSlider' ).append( '<a href="' + jbSliderLink[ i ] + '" target="_blank"><img src="' + jbSliderImg[ i ] + '" title="' + jbSliderCaption[ i ] + '"></a>' );
}

감사합니다.

슬라이더를 글본문 위에 배차 가능한가요?;;

수정할 게 많아 도와드리기 힘듭니다.

그렇근요 감사합니다.

Add new comment

Guest

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
구글이 제공하는 스팸방지 기능입니다. '로봇이 아닙니다'에 체크해야 글을 등록할 수 있습니다.

Book navigation