JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="dots">
    <div class="slide-btn">1</div>
    <div class="slide-btn">2</div>
    <div class="slide-btn">3</div>
</div>

CSS

.dot {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
}

JavaScript

var allowChange = true,
	dots = document.querySelectorAll('.slide-btn');

dots.forEach(function(el){
	el.addEventListener('click',function(){
    	if(allowChange){
        	allowChange = false;
        	this.style.pointerEvents = 'all';
            dots.forEach(function(elem){
            	elem.style.pointerEvents = 'none';
            })
            setTimeout(function(){
            	allowChange = true;
                dots.forEach(function(elem){
                    elem.style.pointerEvents = 'all';
                })
            },1000)
        }
    })
})
document.addEventListener('mousemove',function(){
	if(allowChange){
    	dots[0].click();
    }
})