JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
    <div class="item animate-in" style="background: red;">1</div>
    <div class="item" style="background: yellow;">2</div>
    <div class="item" style="background: brown;">3</div>
</div>

<div class="dot">1</div>
<div class="dot">2</div>
<div class="dot">3</div>
<button id="next">next</button>
<button id="prev">prev</button>

CSS

body {
    margin: 0;
}
* {
    box-sizing: border-box;
}
.body {
    width: 100%;
    height: 300px;
    position:relative;
}
.item {
    text-align: center;
    font-size: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 300px;
    z-index: 0;
    visibility: hidden;
    border: 1px solid black;
    padding: 10px;
}
.item.animate-in {
    animation: a 1s forwards;
}
@keyframes a {
    from {
       clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
       visibility: visible;
       z-index: 2;
    }
    to {
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
        visibility: visible;
        z-index: 2;
    }
}
.item.animate-out {
    animation: b 1s forwards;
}
@keyframes b {
    from {
       clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
       visibility: visible;
       z-index: 2;
    }
    to {
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
        visibility: visible;
        z-index: 0;
    }
}
.dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    border: 1px solid black;
    display: inline-block;
    margin: 10px 5px;
    cursor: pointer;
}

JavaScript

var current = 0,
	elems = document.querySelectorAll('.item'),
    dots = document.querySelectorAll('.dots'),
    next = document.querySelector('#next'),
    prev = document.querySelector('#prev'),
    int = null,
    time = 0,
    changeSlide;
    
    
    next.addEventListener('click',function(){
    	if (document.querySelector('.animate-out') != undefined) {
            document.querySelector('.animate-out').classList.remove('animate-out');
        }
        if (document.querySelector('.animate-in') != undefined) {
            document.querySelector('.animate-in').classList.remove('animate-in');
        }
    	elems[current].classList.add('animate-out');
        if(current + 1 === elems.length){
            elems[0].classList.add('animate-in');
        }else {
            elems[current + 1].classList.add('animate-in');
        }
        current++;
        if(current === elems.length){
            current = 0;
        } 
    })
    
    prev.addEventListener('click',function(){
    	if (document.querySelector('.animate-out') != undefined) {
            document.querySelector('.animate-out').classList.remove('animate-out');
        }
        if (document.querySelector('.animate-in') != undefined) {
            document.querySelector('.animate-in').classList.remove('animate-in');
        }
        elems[current].classList.add('animate-out');
        if(current - 1 === -1){
            elems[elems.length - 1].classList.add('animate-in');
        }else {
            elems[current - 1].classList.add('animate-in');
        }
        current--;
        if(current === -1){
            current = elems.length - 1;
        } 
    })
    
    changeSlide = function(){
    	time++;
        if(time > 240){
        	next.click();
            time = 0;
        }
        requestAnimationFrame(changeSlide)
    }
    changeSlide();