JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<div class="dot">1</div>
<div class="dot">2</div>
<div class="dot">3</div>

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.body {
    width: 100%;
    height: 400px;
    position: relative;
}
.item {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 40px;
    text-align: center;
    padding: 15px;
    border: 1px solid black;
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.item.active {
    background: purple;
    color: white;
    z-index: 2;
    animation: a 1s forwards;
}
@keyframes a {
    from {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}
.dot {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid black;
    border-radius: 50%;
    margin: 20px 10px;
}
.dot.active {
    background: purple;
    color: white;
}

JavaScript

var items = document.querySelectorAll('.body .item');
items[2].classList[0].replace('item','x')
var dots = document.querySelectorAll('.dot');
var current = 0;
items[current].classList.add('active');
dots[current].classList.add('active');

var int = null;

function myslider(){
	console.log(items[current].classList[1].replace('active','not-active'))
	items[current].classList[1].replace('active','not-active')
    dots[current].classList.remove('active')
    if(current + 1 === items.length){
    	items[0].classList.add('active')
        dots[0].classList.add('active')
    }else {
    	items[current + 1].classList.add('active')
        dots[current + 1].classList.add('active')
    }
    current++;
    if(current === items.length){
    	current = 0;
    }
}

var int = setInterval(myslider,2000);

for(var i = 0; i < dots.length; i++){
	dots[i].addEventListener('click',function(){
    	clearInterval(int)
        setTimeout(function(){
        	setInterval(myslider,2000)
        },1000)
    })
}