fullpage 사용 방법

<div id="fullpage">
    <article class="section visual">

        <!-- visual ( type1: 위치 / type2: 이미지,동영상구분 ) -->
        <div class="roll">
            <?php
            $main_banner_sql = banner_print('main_KOR', 'I', 500);
            while($main_banner_row = sql_fetch_array($main_banner_sql)){
            ?>
            <div class="item">
                <a href="<?=$main_banner_row['wm_link']?>" target="<?=$main_banner_row['wm_link_target']?>" style="background-image: url(<?=SP_DATA_URL?>/banner/<?=$main_banner_row['wm_upfile_name']?>);">
                    <img src="<?=SP_DATA_URL?>/banner/<?=$main_banner_row['wm_upfile_mo_name']?>" />
                </a>
            </div>
            <?php } ?>
        </div>
        <div class="vis-control">
            <button type="button" class="stop"><img src="/images/main/vis-stop.png" alt="stop"></button>
            <button type="button" class="play" style="display: none;"><img src="/images/main/vis-play.png" alt="play"></button>
            <button type="button" class="prev"><img src="/images/main/vis-prev.png" alt="prev"></button>
            <p class="vis-dots">
                <span class="now">01</span>/<span class="tot">03</span>
            </p>
            <button type="button" class="next"><img src="/images/main/vis-next.png" alt="next"></button>
        </div>

    </article>
    <article class="section partners">

        <div class="mtit">
            <h3>partners</h3>
        </div>

    </article>
    <article class="section newsandnotice">

        <div class="mtit">
            <h3>newsandnotice</h3>
        </div>

    </article>
    <article class="section contactus">

        <div class="mtit">
            <h3>contactus</h3>
        </div>

    </article>
    <article class="section foot fp-auto-height">
       
       
        <!-- s:footer -->
        <?php include PATH."/inc/foot.php"; ?>
        <!-- e:footer -->

    </article>
</div>
<!-- s:aside -->
<aside id="aside">
    <a href="#visual" data-menuanchor="visual">Main</a>
    <a href="#partners" data-menuanchor="partners">Partners</a>
    <a href="#newsandnotice" data-menuanchor="newsandnotice">News & Notice</a>
    <a href="#contactus" data-menuanchor="contactus">Contact us</a>
    <!-- <a href="#foot">foot</a> -->
</aside>
<!-- e:aside -->

#header {position: fixed;top: 0;left: 0;right: 0;height: 100px;background: rgba(0,0,0,0);background: #fff;}
#aside {position: fixed;top: 50%;right: 80px;transform: translateY(-50%);display: flex;flex-direction: column;align-items: end;}
#aside > a {margin: 9px 0;display: flex;align-items: center;position: relative;font-family: 'empty';font-size: 0;color: var(--color);font-weight: 700;}
#aside > a:before {display: block;content: '';width: 7px;height: 7px;border-radius: 50%;background: #aaa;position: absolute;top: 12px;right: 12px;}
#aside > a:after {opacity: 0;display: block;content: '';width: 32px;height: 32px;box-sizing: border-box;border-radius: 50%;border: 2px solid var(--color);margin-left: 12px;}
#aside > a.active {font-family: 'Montserrat';font-size: 16px;}
#aside > a.active:after {opacity: 1;}
#aside > a.active:before {width: 10px;height: 10px;top: 11px;right: 11px;background: var(--color);}
#fullpage .section {background: #444;}
#fullpage .section:nth-child(odd) {background: #f1f1f1;}
#fullpage .section:not(.foot, .visual) {padding-top: 100px;}
#fullpage .section:not(.foot, .visual) .fp-tableCell {display: flex;justify-content: center;align-items: center;}
#fullpage .section:not(.foot, .visual) .mtit > h3 {font-size: 42px;color: #fff;}
#fullpage .section:nth-child(odd):not(.foot, .visual) .mtit > h3 {color: #222;}
#main .visual{position: relative;}
#main .visual .roll .item{position: relative;overflow: hidden;}
#main .visual .roll .item a {display: block;height: 100vh;background-repeat: no-repeat;background-position: 50%;background-size: cover;}
#main .visual .roll .item img{display: none;width: 100%;opacity: 0;}
#main .visual .vis-control {position: absolute;bottom: 50px;left: calc(50% - 650px);display: flex;align-items: center;}
#main .visual .vis-control * {color: #fff;}
#main .visual .vis-control button {border: 0px;background: none;}

// visual
visual = {
    'init' : function(){
        this.action();
    },
    'action' : function(){
        var $ele = {
            'roll' : $('.visual .roll')
        }
        var rolling = function(){
           
            //item total number
            var tot_len = $('.visual .item').length;
            if (tot_len < 10) { tot_len = '0' + tot_len; } //10 이하 번호앞에 텍스트 0 입력
            $('.visual .vis-dots .tot').text(tot_len);
            //slider
            $ele.roll.slick({
                'fade' : true, //Fade 롤링 효과
                'dots' : false, //하단 pager
                'arrows' : false, //next,prev 버튼
                'infinite' : true, //무한반복
                'slidesToShow' : 1, //슬라이드 갯수
                'slidesToScroll' : 1, //롤링시 슬라이드 갯수
                'autoplay' : true, //자동롤링
                'autoplaySpeed' : 4000, //자동롤링 딜레이
                'swipe' : false, //모바일 스와프 여부
                'centerMode' : false, //Center모드. 가운데 slide에 'slick-active' 클래스 부여.
                'centerPadding' : 0, //Center모드인 경우 좌/우 여백 설정
                'vertical' : false, //vertical 모드
                'zIndex' : 80, //z-index
                'responsive' : [
                    //tablet
                    {
                        'breakpoint' : 1300,
                        'settings' : {
                            'swipe' : true
                        }
                    }
                ]
            });
            //현재 슬라이드 number
            $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){
                now_len = currentSlide + 1;
                if (now_len < 10) { now_len = '0' + now_len; } //10 이하 번호앞에 텍스트 0 입력
                $('.visual .vis-dots .now').text(now_len);
            });
            //control prev
            $('.vis-control .prev').click(function(){
                $ele.roll.slick('slickPrev');
            });
            //control next
            $('.vis-control .next').click(function(){
                $ele.roll.slick('slickNext');
            });
            //control stop
            $('.vis-control .stop').click(function(){
                $ele.roll.slick('slickPause');
                $(this).hide();
                $('.vis-control .play').show();
            });
            //control play
            $('.vis-control .play').click(function(){
                $ele.roll.slick('slickPlay');
                $(this).hide();
                $('.vis-control .stop').show();
            });
        }
        rolling();
    }
}
visual.init();
$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['visual', 'partners', 'newsandnotice', 'contactus', 'foot'],
        menu : '#aside',
        responsiveWidth: '1400',
        showActiveTooltip: true,
        css3: true,
    });
});