HTML & javascript ) 세로 슬라이드 만들기 (무한루프)

 

슬라이드 조건

- 슬라이드 개수는 5개

 - delay시간은 5초

 - 자동으로 5초뒤면 넘어가고, 무한루프

 

swiper로 슬라이드 만들고, 세로 슬라이드 옵션을 켜면 익스플로러에서 깨지는 현상이 있었다.

그래서 그냥 직접 만들었던 세로 슬라이드 소스코드다. 그땐 DB에서 값 불러오는 슬라이드였어서 php 코드랑 얽혀있었는데 다 배제하고 슬라이드 기능만 있는 순수 html, javascript 코드다.

요샌 익스플로러까지 신경들 안쓰니, 그냥 스와이퍼 사용한다. 스와이퍼 짱짱맨

 

 

html, javascript 소스

<div class="slideList" id="slideList" NowIdx=0>
    <div class="SlideBox" idx=0>
        <div class="BsSubject">
            <div style="float:left">내용 0 </div>
        </div>
    </div>
    <div class="SlideBox" idx=1>
        <div class="BsSubject">
            <div style="float:left">내용 1 </div>
        </div>
    </div>
    <div class="SlideBox" idx=2>
        <div class="BsSubject">
            <div style="float:left">내용 2 </div>
        </div>
    </div>
    <div class="SlideBox" idx=3>
        <div class="BsSubject">
            <div style="float:left">내용 3 </div>
        </div>
    </div>
    <div class="SlideBox" idx=4>
        <div class="BsSubject">
            <div style="float:left">내용 4 </div>
        </div>
    </div>
</div>
 
<script>
    var ListCount        = 5; // 슬라이드 개수
    var MvPoint            = 0; // 슬라이드가 움직일 거리
    var NowIdx            = 0; // 현재 index
    var ListTimeout        = "";
    var SlideBox        = document.getElementsByClassName("SlideBox");
    var BoxHeight        = SlideBox[0].offsetHeight;
    var FirstBox        = SlideBox[0].cloneNode(true);
    var SlideTime        = 5000; // 슬라이드 delay 시간 (5초)
 
    document.getElementById("slideList").appendChild(FirstBox);
 
    function SlideEffect(idx){
        $(".slideList").css({"transform":"translate3d(0px, "+MvPoint+"px, 0px)", "transition":"0.3s"});
        MvPoint    = MvPoint-BoxHeight;
        next_idx    = idx+1;
 
        if(idx == ListCount){
            setTimeout(function(){
                $(".slideList").css({"transform":"translate3d(0px,0px,0px)", "transition":"0s"});
            }, 300);
            idx            = 0;
            next_idx    = 1;
            MvPoint    = 0 - BoxHeight;
        }
        $(".slideList").attr("NowIdx", idx);
        setTimeout("SlideEffect(next_idx)",SlideTime);
    }
    $(window).ready(function(){
        setTimeout("SlideEffect(0)", 0);
    });
</script>

 

라이브러리로 다 되는 기능이지만, 한번씩 직접 하드코딩도 해 봐야한다.

어떻게 돌아가는지 알아야 라이브러리도 잘 쓰게되니까.

반대로 라이브러리 많이 써보는것도 코딩 실력 향상에 도움된다.

 

참 간단한건데 맨 처음 직접 하려고하면 어렵다.