참고하여 구현해보세요

```html
<div class="video-slider">
    <div>
        <video class="slide-video">
            <source src="video1.mp4" type="video/mp4">
        </video>
    </div>
    <div>
        <video class="slide-video">
            <source src="video2.mp4" type="video/mp4">
        </video>
    </div>
    <!-- 추가 슬라이드... -->
</div>

<script>
$(document).ready(function(){
    // 모든 비디오의 duration을 저장할 객체
    var videoDurations = {};
    var currentSlide = 0;
    var slider = $('.video-slider');
    
    // 모든 비디오의 메타데이터가 로드되면 실행
    $('.slide-video').each(function(index) {
        $(this).on('loadedmetadata', function() {
            videoDurations[index] = this.duration * 1000; // milliseconds로 변환
        });
    });

    // 슬릭 슬라이더 초기화
    slider.slick({
        dots: true,
        arrows: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 1000, // 기본값, 실제로는 비디오 길이에 따라 동적으로 변경됨
        pauseOnHover: false,
        pauseOnFocus: false
    });

    // 슬라이드 변경 시 이전 비디오 정지 및 새 비디오 재생
    slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        // 현재 비디오 정지
        var currentVideo = $(slick.$slides[currentSlide]).find('video')[0];
        if (currentVideo) {
            currentVideo.pause();
            currentVideo.currentTime = 0; // 비디오 위치 처음으로 리셋
        }
        
        // 다음 비디오 준비
        var nextVideo = $(slick.$slides[nextSlide]).find('video')[0];
        if (nextVideo) {
            nextVideo.currentTime = 0; // 비디오 위치 처음으로 리셋
        }
    });

    // 슬라이드 변경 후 새 비디오 재생
    slider.on('afterChange', function(event, slick, currentSlide) {
        var currentVideo = $(slick.$slides[currentSlide]).find('video')[0];
        if (currentVideo) {
            currentVideo.play();
            
            // 현재 비디오가 끝나면 다음 슬라이드로 이동
            currentVideo.onended = function() {
                slider.slick('slickNext');
            };

            // autoplaySpeed를 현재 비디오 길이로 설정
            slider.slick('setOption', 'autoplaySpeed', videoDurations[currentSlide]);
        }
    });

    // 초기 첫 비디오 재생
    var firstVideo = $('.slide-video').first()[0];
    if (firstVideo) {
        firstVideo.play();
    }

    // 도트 클릭 시 비디오 처음부터 재생
    $('.slick-dots li button').on('click', function() {
        var slideIndex = $(this).parent().index();
        var video = $(slider.$slides[slideIndex]).find('video')[0];
        if (video) {
            video.currentTime = 0;
        }
    });
});
</script>
```

CSS 스타일링
```css
.video-slider {
    width: 100%;
    max-width: 1000px; /* 원하는 최대 너비 */
    margin: 0 auto;
}

.video-slider video {
    width: 100%;
    height: auto;
    display: block;
}

/* 필요한 경우 슬라이더 컨트롤 스타일링 */
.slick-dots {
    bottom: 20px;
}

.slick-dots li button:before {
    font-size: 12px;
    color: white;
}
```

1. 모바일에서 자동재생이 안 될 수 있으므로 비디오 속성에 `playsinline muted`를 추가:
```html
<video class="slide-video" playsinline muted>
```

2. 비디오 프리로딩이 필요한 경우:
```html
<video class="slide-video" preload="auto">
```

3. 성능 최적화가 필요한 경우 lazy loading 적용:
```html
<video class="slide-video" loading="lazy">
```