[jQuery] 간단한 이미지 슬라이더

뭐 대단한 것은 아니다. 여러 장의 이미지를 이전, 다음 버튼을 클랙할 때마다 좌, 우로 슬라이딩 되면서 보여주는 게 전부이다. 이런 간단한 것을 간만에 했더니 좀 시간이 걸렸는데.. 자주 쓰던 것들도 한동안 안쓰니 머리 속에서 시원스레 지워지나 보다. ㅋ

먼저 jQuery 코드이다.

<script>
$(function() {
    var time = 500;
    var idx = idx2 = 0;
    var slide_width = $("#slider").width();
    var slide_count = $("#slider li").size();
    $("#slider li:first").css("display", "block");
    if(slide_count > 1)
        $(".btn").css("display", "inline");

    $("#prev_btn").click(function() {
        if(slide_count > 1) {
            idx2 = (idx - 1) % slide_count;
            if(idx2 < 0)
                idx2 = slide_count - 1;
            $("#slider li:hidden").css("left", "-"+slide_width+"px");
            $("#slider li:eq("+idx+")").animate({ left: "+="+slide_width+"px" }, time, function() {
                $(this).css("display", "none").css("left", "-"+slide_width+"px");
            });
            $("#slider li:eq("+idx2+")").css("display", "block").animate({ left: "+="+slide_width+"px" }, time);
            idx = idx2;
        }
    });

    $("#next_btn").click(function() {
        if(slide_count > 1) {
            idx2 = (idx + 1) % slide_count;
            $("#slider li:hidden").css("left", slide_width+"px");
            $("#slider li:eq("+idx+")").animate({ left: "-="+slide_width+"px" }, time, function() {
                $(this).css("display", "none").css("left", slide_width+"px");
            });
            $("#slider li:eq("+idx2+")").css("display", "block").animate({ left: "-="+slide_width+"px" }, time);
            idx = idx2;
        }
    });
});
</script>

다음은 HTML 코드이다.

<button type="button" id="prev_btn" class="btn">이전</button>
<button type="button" id="next_btn" class="btn">다음</button>
<ul id="slider">
    <li><img src="slider/img01.jpg"></li>
    <li><img src="slider/img02.jpg"></li>
    <li><img src="slider/img03.jpg"></li>
</ul>

그리고 마지막으로 CSS 코드이다.

#prev_btn {position:absolute;top:0;left:0}
#next_btn {position:absolute;top:0;right:0}
.btn {width:2em;height:280px;border:0;background:#f5f6fa;display:none;}

#slider {position:relative;margin:0 auto;padding:0;list-style:none;width:280px;height:280px;overflow-x:hidden}
#slider li {display:none;position:absolute;left:0;top:0}
#slider img {width:280px;height:280px}

이렇게 만들어 놓고.. 문득 든 생각이 슬라이딩 방향이 맞는 건가 하는.. 쓸데없을 수도 있는 생각이 들기 시작했다. 맞는 것 같기도 하면서 사람들마다 생각하는 게 다를 수도 있기 때문에.. 일단 방향을 바꿔달라고 하면 바꾸면 되니까.. 방향 바꾸는 거야 앉아서 밥먹기다. ㅋ