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 537 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
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown