<div class="visual">
    <div class="roll">
        <div class="item">slider1</div>
        <div class="item">slider2</div>
        <div class="item">slider3</div>
    </div>

    <p class="vis-dots">
        <span class="now">01</span>
        /
        <span class="tot">03</span>
    </p>
    <div class="vis-control">
        <button class="play">play</button>
        <button class="stop">stop</button>
    </div>
</div>

//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' : false, //Fade 롤링 효과
                'dots' : true, //하단 pager
                'arrows' : true, //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
                        }
                    },
                    //mobile
                    {
                        'breakpoint' : 750,
                        '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 play
            $('.vis-control .play').click(function(){
                $ele.roll.slick('slickPlay');
            });

            //control stop
            $('.vis-control .stop').click(function(){
                $ele.roll.slick('slickPause');
            });
        }
        rolling();
    }
}
$(function(){
    if($('.visual').length>0){
        visual.init();
    }
})

<div class="visual">
    <div class="roll">
        <div class="item" data-src="<div class='video'><video class='vis_video pc' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video><video class='vis_video mobile' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video></div>">
            <div class="video">
                <!-- controls autoplay muted loop playsinline -->
                <video class="vis_video pc" autoplay muted playsinline>
                    <source src="<?=DIR?>/files/main.mp4" type="video/mp4">
                </video>
                <video class="vis_video mobile" autoplay muted playsinline>
                    <source src="<?=DIR?>/files/main.mp4" type="video/mp4">
                </video>
            </div>
        </div>
        <div class="item">
            <a href="#" target="_blank" class="__pc"><img src="<?=DIR?>/images/main/visual1.jpg" /></a>
            <a href="#" target="_blank" class="__ta"><img src="<?=DIR?>/images/main/visual1.jpg" /></a>
            <a href="#" target="_blank" class="__mo"><img src="<?=DIR?>/images/main/visual1.jpg" /></a>
        </div>
    </div>
</div>

#main .visual .video {position: relative;z-index: 0;width: 100vw;height: 900px;overflow: hidden;}
#main .visual .video video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;width: auto;height: auto;}
#main .visual .video video.pc {display: block;}
#main .visual .video video.mobile {display: none;}

// visual
visual = {
    'init' : function() {
        this.action();
    },
    'action' : function() {
        var $video_pc = $('.vis_video.pc');
        var $video = $('.vis_video.mobile');
        var $ele = {
            'win' : $('window'),
            'roll' : $('.visual .roll')
        }
        var rolling = function() {
            $ele.roll.slick({
                'fade' : true, // Fade 롤링 효과
                'dots' : true, // 하단 pager
                'arrows' : false, // next,prev 버튼
                'infinite' : true, // 무한반복
                'slidesToShow' : 1, // 슬라이드 갯수
                'slidesToScroll' : 1, // 롤링시 슬라이드 갯수
                'autoplay' : false, // 자동롤링
                '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
                        }
                    },
                    // mobile
                    {
                        'breakpoint' : 750,
                        'settings' : {
                            'swipe' : true
                        }
                    }
                ]
            });
        }
        rolling();
        //영상 끝나면 다음 슬라이드 이동 (영상 멈춤)
        function vid_end(){
            if(getdevice()=="pc"){
                $video_pc.bind('ended', function(){
                    $ele.roll.slick('slickPause');//자동슬라이드 멈춤
                    $video_pc.stop();
                    $ele.roll.slick('slickNext');
                    $video_pc[0].currentTime = 0;//영상 초기화
                    // console.log('Video ended!');
                });
            }else{
                $video.bind('ended', function(){
                    $ele.roll.slick('slickPause');//자동슬라이드 멈춤
                    $video.stop();
                    $ele.roll.slick('slickNext');
                    $video[0].currentTime = 0;//영상 초기화
                    // console.log('Video ended!');
                });
            }
        }
        $(window).on({
            'load' : function(){
                vid_end();
            }
        });
       
        // slide 이동시 video 컨트롤
        $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){
            var video_src = $('.item.slick-active[data-src]').data('src');
            $('.visual .item .video').remove();
            // console.log(video_src);
            if (currentSlide == 0) {
                // $video[0].currentTime = 0;//영상 초기화
                // console.log('video');
                $ele.roll.slick('slickPause');//자동슬라이드 멈춤
                $('.visual .item.slick-active').append(video_src);
                if(getdevice()=="pc"){
                    $video_pc[0].play();
                }else{
                    $video[0].play();
                }
                vid_end();
            }else{
                // console.log('image');
                $ele.roll.slick('slickPlay');//자동슬라이드 멈춤
            }
        });
    }
}