jQuery 폐쇄형 슬라이드

jQuery 슬라이드

---

웹사이트에서 제이쿼리를 이용한 슬라이드

폐쇄형으로 작업되었다. 즉, 이전, 다음 이미지가 보이지 않는 오로지 중앙에 이미지가 나올때 적합한 소스이다.

오픈된 슬라이드 메뉴가 아닌 폐쇄형 슬라이드다.

실행된 이미지 

    

        

            이전
            다음
        
        

            

                
0000
                
1111
                
2222
                
3333
            
        
        

            
            
            
            
        
    

    
    .wrap {width:400px; margin:0 auto; }
    .wrap .sliderWrap {width:400px; height:200px;overflow:hidden;}
    .wrap .slider:after {display:block; content:""; clear:both;}
    .wrap .slider {height:100%; width:1600px; position:relative;}
    .wrap .box {float:left; width:400px; height:100%; position: absolute; left:400px; top:0; font-size:20px; text-align: center; line-height:200px; color:#fff;}
    .wrap .box:nth-child(1){background:burlywood; }
    .wrap .box:nth-child(2){background:rebeccapurple}
    .wrap .box:nth-child(3){background:blue}
    .wrap .box:nth-child(4){background:green}
    .wrap .indicator {font-size:0; text-align:center; margin-top:10px;}
    .wrap .indicator a:first-child {margin-left:0;}
    .wrap .indicator a {display:inline-block; width:14px; height:14px; border-radius:8px; background: fuchsia; margin-left:5px;}
    .wrap .indicator a.on {background:blueviolet}

(function(){

    var curIdx = 0;
    var $item = $('.box')
    var len = $item.length
    var $indicator = $('.indicator')

    $item.eq(0).css({
        left : 0
    });
    function show(direc, hideIdx, showIdx){
        console.log('hideIdx : ' + hideIdx + '   showIdx : ' + showIdx);
        //next
        $item.eq(hideIdx).animate({
            left : (direc * -400) +"px"
        });
        
        $item.eq(showIdx).css({
            left : (direc * 400) + "px"
        });
        $item.eq(showIdx).animate({
            left : 0
        });
        $indicator.find('a').eq(showIdx).addClass('on').siblings().removeClass('on');
        curIdx = showIdx;
    }
    setInterval(function() {
        var showIdx = curIdx + 1
        if(len <= showIdx){
            showIdx = 0
        }
        show(1, curIdx, showIdx);
    }, 2000)

    $('.next').on('click', function(){
        var showIdx = curIdx + 1
        if(len <= showIdx){
            showIdx = 0
        }
        //next()
        show(1, curIdx, showIdx);
    })
    $('.prev').on('click', function(){
        var showIdx = curIdx - 1;
        if(showIdx < 0 ){
            showIdx = len - 1
        }
        //prev()
        show(-1, curIdx, showIdx)
    });

    $('.indicator a').on('click', function(){
        var idx = $(this).index();
        
        // curIdx++
        // console.log(curIdx)
        show(idx > curIdx ? 1 : -1, curIdx, idx);

    });


})();

sub's

Blog