[티스토리] 반응형 #1 bxslider(슬라이드 갤러리)설치

💻 Information/Computer

[티스토리] 반응형 #1 bxslider(슬라이드 갤러리)설치

GigaWatt 2017. 7. 27. 00:06

1. 슬라이더 파일 업로드

bxslider.css, jquery.bxslider.min.js 2개 다운 받아서 스킨편집에서 파일 업로드

bxslider.css

jquery.bxslider.min.js

2. 슬라이더 속성 스크립트 붙여넣기

아래 코드를 html의 <head>~</head> 안에 넣는다. 대문 슬라이드 배너 스크립트.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- 대문 슬라이드 배너 스크립트--> 
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
mode: 'fade', //슬라이드 형식 (ex. horizontal, vertical)
useCSS: false,
randomStart:true, //사진 램덤시작 안쓰면 지우기
infiniteLoop: true,
adaptiveHeight: true,
hideControlOnEnd: true,
/*easing: 'easeOutElastic',*/
pause: 5000, //정지시간
speed: 500, // 속도
pager:false
}
);
});
</script> 
<!-- bxSlider Javascript file -->
<script src="./images/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="./images/bxslider.css" rel="stylesheet"> 
 
<!-- 각페이지 마다 다른 배경화면 출력 -->
<script>
if(window.location.pathname == "/"
 || window.location.pathname == "/admin/skin/newpreview.php"){document.getElementById('mainHead').style.display="";
document.getElementById('subhead').style.display="none";
}
else{
document.getElementById('mainHead').style.display="none";
document.getElementById('subhead').style.display="";
}
</script>
<!-- 각페이지 마다 다른 배경화면 출력 -->
 
<!-- 대문 슬라이드 배너 스크립트 끝-->
Colored by Color Scripter
cs

3. HTML 슬라이더 위치 조정

아래 코드를 html의 </s_notice_rep> 아래에 붙여 넣는다. 대문 슬라이드.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--bx슬라이더 시작-->
 
                <div id="mainHead">
 
                <ul class="bxslider">
 
  <li style="display: none;"><a href="https://gigawatt.tistory.com/guestbook"><img src="./images/bxslider_pic1.jpg" width="100%"></a></li>
 
  <li style="display: none;"><a href="https://gigawatt.tistory.com/guestbook"><img src="./images/bxslider_pic2.jpg" width="100%"></a></li>
 
//이 부분은 똑같이 복사 붙여넣기 해서 추가하면 사진 수가 늘어납니다.
 
                    </ul>
 
                    </div>
 
                    <div id="subhead">
 
<!--<img src="./images/banner-garo.jpg" width="100%" id="imgSizeTest">-->
 
                </div>
 
<!--bx슬라이더 끝-->
Colored by Color Scripter
cs

4. 슬라이더에 원하는 사진 넣기

파일이름 "bxslider_pic1.jpg", "bxslider_pic2.jpg" 등으로 HTML/CSS 편집에서 파일 업로드 한다.

※ 단계가 많으니 스킨 백업후 진행하세요.

저작자표시 비영리 변경금지

현재글[티스토리] 반응형 #1 bxslider(슬라이드 갤러리)설치

기가왓

[티스토리] 반응형 #1 bxslider(슬라이드 갤러리)설치

1. 슬라이더 파일 업로드

2. 슬라이더 속성 스크립트 붙여넣기

3. HTML 슬라이더 위치 조정

4. 슬라이더에 원하는 사진 넣기

'💻 Information/Computer'의 다른글

티스토리툴바

[티스토리] 반응형 #1 bxslider(슬라이드 갤러리)설치

1. 슬라이더 파일 업로드

2. 슬라이더 속성 스크립트 붙여넣기

3. HTML 슬라이더 위치 조정

4. 슬라이더에 원하는 사진 넣기

'💻 Information/Computer'의 다른글

관련글

티스토리툴바