JSFiddle - React, Tailwind, and code Playground
JavaScript
var eventWidth = null;
function checkWidth(eventWidth){
window.addEventListener("resize", debounce(function(event) {
eventWidth=document.body.clientWidth;
console.log(eventWidth + ' wide by ' + document.body.clientHeight+' high');
return slideReset();
},500));
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
function slideReset(){
if($(window).width()>1002){
var slidePosition=true;
var tid = setTimeout(slider, 5000);
function slider() {
if (slidePosition==true){
$(".slider").toggleClass("slider-transform");
console.log("slide:"+slidePosition);
slidePosition=false;
}else{
$(".slider").toggleClass("slider-transform");
console.log("slide:"+slidePosition);
slidePosition=true;
}
checkWidth();
tid = setTimeout(slider, 5000); // repeat myself
}
} else {
console.log("slide more");
var slidePosition=true;
var tid1 = setTimeout(slide1, 5000);
function slide1() {
console.log("side1");
$(".slider").addClass("slider-transform-m1");
$(".slider").removeClass("slider-transform-m2");
$(".slider").removeClass("slider-transform-m3");
$(".slider").removeClass("slider-transform-m4");
checkWidth();
tid1 = setTimeout(slide2, 5000); // repeat myself
}
function slide2() {
$(".slider").removeClass("slider-transform-m1");
$(".slider").addClass("slider-transform-m2");
$(".slider").removeClass("slider-transform-m3");
$(".slider").removeClass("slider-transform-m4");
checkWidth();
console.log("side2");
tid1 = setTimeout(slide3, 5000); // repeat myself
}
function slide3() {
$(".slider").removeClass("slider-transform-m1");
$(".slider").removeClass("slider-transform-m2");
$(".slider").addClass("slider-transform-m3");
$(".slider").removeClass("slider-transform-m4");
console.log("side3");
checkWidth();
tid1...