JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="slider_contain" class="slider_contain">
<div id="slider" class="img_container">
<div class="img_slide"><img id="myImage" src="https://www.hloe.co.uk/sample.jpg" srcset="https://www.hloe.co.uk/sample_small.jpg 500w, https://www.hloe.co.uk/sample.jpg 2000w"></div><div class="img_slide"><img src="https://www.hloe.co.uk/sample2.jpg"></div><div class="img_slide"><img src="https://www.hloe.co.uk/sample3.jpg"></div><div class="img_slide"><img src="https://www.hloe.co.uk/sample4.jpg"></div><div class="img_slide"><img src="https://www.hloe.co.uk/sample.jpg"></div>
</div>
<div class="overlay">Woodhacker</div>
</div>

CSS

body {margin:0;}

.slider_contain {position:relative;display: block;max-width:100%;margin:auto;aspect-ratio: 2 / 1;overflow:hidden;white-space: nowrap;
}

.overlay {position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0, 0, 0, 0.5);}

.img_container {display: block;max-width:100%;margin:auto;aspect-ratio: 2 / 1;overflow:visible;white-space: nowrap;
transition: margin-left .5s;}
.img_container2 {display: block;max-width:100%;margin:auto;aspect-ratio: 2 / 1;overflow:visible;white-space: nowrap;
transition: margin-left .5s;}

/* margin-left:-100%;transition: margin-left .5s;
.img_container3 {display: block;max-width:100%;margin:auto;aspect-ratio: 2 / 1;overflow:visible;white-space: nowrap;
margin-left:-200%;transition: margin-left .5s;}
.img_container4 {display: block;max-width:100%;margin:auto;aspect-ratio: 2 / 1;overflow:visible;white-space: nowrap;
margin-left:-300%;transition: margin-left .5s;}
*/

.img_slide, .img_slide2 {display:inline-block;width: 100%;height:100%;overflow:hidden;margin:0;padding:0;}

.img_slide img {width:100%;object-fit:contain;transform: scale(1);transition: transform 20s;margin:0;padding:0;}

.img_slide2 img {width:100%;object-fit:contain;transform: scale(1.5);transition: transform 20s;margin:0;padding:0;}





.control {text-align:center;margin-top:30px;}

JavaScript

var slider = document.getElementById('slider');
var nodes = slider.childNodes;
var list = slider.querySelectorAll("div");
var nums = slider.childElementCount;

var len = 100;
var num = (nums - 1);

function startTime(num,len,nums) {

slider.style.transition = "margin-left .9s";

if (num > 1) {
slider.style.marginLeft = "-" + len + "%";
num = (num - 1);
len = (len + 100);
}

else {
setTimeout(function() {btStart()}, 2000);
slider.style.marginLeft = "-" + len + "%";
num = (nums - 1);
len = 100;

}


for(var i=0; i<list.length; i++) {
if (list[i].className == "img_slide") {list[i].className = "img_slide2";}
else {list[i].className = "img_slide";}
}

/*
else if (slider.className == "img_container2") {
slider.className = "img_container3";
}
else if (slider.className == "img_container3") {
slider.className = "img_container4";
setTimeout(function() {btStart()}, 1000);
}
else if (slider.className == "img_container4") {
slider.className = "img_container";
}
*/

  
  setTimeout(function() {startTime(num,len,nums)}, 5000);
}

function btStart() {
var slider = document.getElementById('slider');
slider.style.transition = "none";
slider.style.marginLeft = "0%";
}




var completeInterval = null, renderedInterval = null, count = 0;
var theImg = document.getElementById('myImage');

var preload = slider.children[0];
var theImg = preload.firstChild;

// Wait for image to be loaded (but not necessarily rendered)
completeInterval = setInterval(function() {
  ++count;
  if (theImg.complete || count > 20) {
    // Cancel checking once IMG is loaded OR we've tried for ~9s already
    clearInterval(completeInterval);
    completeInterval = null;
    count = 0;
    if (count > 20) {
      // Image load went wrong, so do something useful:
      console.error("ERROR: Could not load image");
    } else {
      // IMG is now 'complete' - but that just means it's in the render queue...
      // Wait for naturalWidth and naturalHeight to be > 0 since this shows
      // that the image is done...