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

I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel.

After a bit of looking around i think the best replacement, is a non JQuery slider, which is...

Tiny Slider

Git: https://github.com/ganlanyuan/tiny-slider

Demos: http://ganlanyuan.github.io/tiny-slider/demo/ 

Ill give it a quick go below, and see how easy it is to get working. 

Working Example: https://codepen.io/maggieserino/pen/dyGwLoM 

Another Working Test: https://codepen.io/kruxor/pen/jOVoXpo 

Test Video: https://kruxor.com/videos/small.mp4 

Still trying to get working:

  • text overlay on image background
  • text overlay on video
  • video should cover the slide container the same way background images do

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,
        }
    }*/

  });
});
Slide One

Other Items in javascript

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 454 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
When I realized that, no individual step is hard in any process. Building this airport I'm standing in right now started with a guy writing the architectural plans on paper. That's not hard for him to do. Then laying the first beam isn't had. The whole thing is really hard. So, just take each step kind of piece by piece and when I was able to do that and stop trying to chase this prize and started putting in the work, things just started coming together.
Unknown