replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]

replacement slider for ken wheeler's slick carousel tiny slider 2 [testing] Demo

View Demo Full Screen View Demo New Tab

replacement slider for ken wheeler's slick carousel tiny slider 2 [testing] Code

HTML

<div class='tiny-slider'>
  <div class='slide slide1'>
    <div class='slide-overlay'>
      <div class='slide-title'>Slide One</div>
    </div>
  </div>
  <div class='slide slide2'>
  	<img src="https://placeimg.com/700/500/tech" alt="">
  </div>
  <div class='slide slide3'>
	<div class='video-slide'>
		<video id="desk" loop autoplay muted>
			<source src="/videos/small.mp4" type="video/mp4">
		</video>
	</div>
  </div>
</div>

          <ul class="controls" id="customize-controls">
            <li class="prev">
              <img src="images/angle-left.png" alt="">
            </li>
            <li class="next">
              <img src="images/angle-right.png" alt="">
            </li>
          </ul>
          <div class="playbutton-wrapper">
            <button id="customize-toggle">Pause</button>
          </div>

CSS

.slide {
  position:relative;
  width:100%;
  height:500px;
}
.slide img {
 	width:100%; 
  	height:500px;
}
.slide video {
	width:100%;
  	height:500px;
}
.slide1 {
	background:url(https://placeimg.com/700/500/tech/sepia) center no-repeat;
  	background-size:cover;
}
.slide-overlay {
	position:absolute;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.min.css" integrity="sha512-06CZo7raVnbbD3BlY8/hGUoUCuhk8sTdVGV3m3nuh9i2R+UmkLbLRTE/My8TuJ3ALbDulhBObJQWtOUt0mXzNQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.2/min/tiny-slider.js"></script>

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
const slider = tns({
    container: '.tiny-slider',
    loop: true,
    items: 1,
    slideBy: 'page',
    nav: true,    
    autoplay: true,
    speed: 400,
    autoplayButtonOutput: false,
    mouseDrag: true,
    lazyload: true,
    controlsContainer: "#customize-controls"
    /*responsive: {
        640: {
            items: 2,
        },
        
        768: {
            items: 3,
        }
    }*/

  });
});