티스토리 상단에 이미지 슬라이더 넣기

무료스킨을 제외한 모든스킨 배포 중지합니다

티스토리 뷰

WEB&HTML&CSS

티스토리 상단에 이미지 슬라이더 넣기

티스토리 블로그 상단에 이미지 슬라이더를 넣는 소스 이다.

정상적으로 잘 적용을 한다면 위에 보이는 이미지 처럼 될것이다.

아래보이는 파일 2개를 티스토리 블로그에 업로드 해준다.

bxslider.css
jquery.bxslider.min.js

이후 아래 보이는 대문 슬라이드 스크립트 관련 소스를 <head>~~</head> 사이에 넣어 준다.

코드중에 연두색으로 체크된 부분정도만 원하는데로 수정해 주면 된다.

pause 에 해당되는 숫자는 이미지가 멈춰있는 시간이다. 6000으로 되어있는되 대략 6초 정도일것이다.

다음으로 speed 에 해당되는 숫자는 이미지간 바뀌는 속도이다 500으로 되어있고 대략 0.5초 정도를 의미한다.

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
<!-- 대문 슬라이드  스크립트--> 
                <script>
                $(document).ready(function(){
                    $('.bxslider').bxSlider({
                        auto: true,
                        mode: 'horizontal',
                        useCSS: false,
                        infiniteLoop: true,
                        adaptiveHeight: true,
                        pause: 6000,
                        speed: 500,
                        pager:false
                        }
                        );
                    });
                </script>    
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <!-- bxSlider Javascript file -->
        <script src="./images/jquery.bxslider.min.js"></script>
        <!-- bxSlider CSS file -->
        <link href="./images/bxslider.css" rel="stylesheet">
        
<!-- 대문 슬라이드  스크립트-->
Colored by Color Scripter
cs

이제 마지막 아래 보이는 이미지 슬라이더 소스를 나타내고자 하는곳에 올려주면 끝이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--대문 슬라이드-->    
 
<ul class="bxslider">
    <li><img src="./images/img1.png" /></li>
    <li><img src="./images/img2.png" /></li>
    <li><img src="./images/img3.png" /></li>
    <li><img src="./images/img4.jpg" /></li>
    <li><img src="./images/img5.jpg" /></li>
    <li><img src="./images/img6.jpg" /></li>
</ul>    
            
<!--대문 슬라이드-->
 
Colored by Color Scripter
cs