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