자바스크립트 제이쿼리 세로 슬라이더 예제 (JavaScript & jQuery Vertical Slider)

자바스크립트 (JavaScript)

 

See the Pen 세로 슬라이드 자체 제작 코드 by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 제이쿼리 세로 슬라이더 예제 (JavaScript & jQuery Vertical Slider) 코드펜 소스코드입니다.

 

$('.slider-box-1 > .side-btns > div').click(function() {
    var $this = $(this);
    var isUp = $this.index() == 0;
    var $slider = $this.closest('.slider-box-1');
    
    if ( $slider.attr('data-slider-box-1-now-work') === 'Y' ) {
        return;
    }
    
    $slider.attr('data-slider-box-1-now-work', 'Y');
    var $current = $slider.find(' > .slides > div.active');
    var $post = null;
    
    if ( isUp ) {
        $post = $current.prev();
        if ( $post.length == 0 ) {
            $post = $slider.find(' > .slides > div:last-child');
        }
    }
    else {
        $post = $current.next();
        if ( $post.length == 0 ) {
            $post = $slider.find(' > .slides > div:first-child');
        }
    }
    
    var $prev = $post.prev();
    if ( $prev.length == 0 ) {
        $prev = $slider.find(' > .slides > div:last-child');
    }
    
    var $next = $post.next();
    if ( $next.length == 0 ) {
        $next = $slider.find(' > .slides > div:first-child');
    }
    
    $current.removeClass('active');
    $post.addClass('active');
    
    if ( isUp ) {
        $prev.stop().animate({top: '240%'}, 300, function() {
            $prev.css('top', '-120%');
        });
        $post.stop().animate({top: '0%'}, 300);
        $next.stop().animate({top: '120%'}, 300);
    }
    else {
        $prev.stop().animate({top: '-120%'}, 300);
        $post.stop().animate({top: '0%'}, 300);
        $next.stop().animate({top: '-240%'}, 300, function() {
            $next.css('top', '120%');
        });
    }
    
    setTimeout(function() {
        $slider.attr('data-slider-box-1-now-work', 'N');
    }, 300);
})

$('.slider-box-1 > .side-btns > div').eq(0).click();