HTML

slick slider pause on video play

	<div id="slideBox">
		<!--Sidebar-->
			
		<div id="main-image" class="sliderMain">
			<div><img src="https://placeimg.com/640/480/any"></div>
			<div><img src="https://placeimg.com/640/480/any"></div>
			<div><img src="https://placeimg.com/640/480/any"></div>
			<div><img src="https://placeimg.com/640/480/any"></div>
			<div><img src="https://placeimg.com/640/480/any"></div>
			<div id="slide-video">
				<video width="900px" id="theVideo">
					<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" />
				</video>
			</div>
		</div>
			
	</div><!--slideBox-->

<script>
		$(document).ready(function() {
    $('.sliderMain').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: false,
        autoplay: true,
        autoplaySpeed: 3000,
        infinite: false,
    });

    $('.sliderMain').on('afterChange', function(event, slick, currentSlide) 
    {
        var video = $('.sliderMain .slick-active').find('video');
        if ($('.slick-current').find('video').length !== 0) 
        {
            $('.sliderMain').slick('slickPause');
            theVideo.play();
        }
    });
    document.getElementById('theVideo').addEventListener('ended', myHandler, false);
    function myHandler(e) 
  	{
        $('.sliderMain').slick('slickPlay');
    }
});
</script>