JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div class="slider">
    <div class="rubber-indicator">
        <ol class="page-dots">
            <li data-id="img_0" class="dot current"></li>
            <li data-id="img_1" class="dot"></li>
            <li data-id="img_2" class="dot"></li>
            <li data-id="img_3" class="dot"></li>
        </ol>
    </div>
    <img id="img_0" src="https://pbs.twimg.com/profile_images/763445868150329344/QVR6N2l_.jpg" class="img show">
    <img id="img_1" src="https://1.bp.blogspot.com/-O04oMX7-qC0/Uci6tIoqZcI/AAAAAAAAViU/W8ZmV9N5wcY/s640/Lefkada+Greece+9.jpg" class="img">
    <img id="img_2" src="https://www.greeka.com/members/user_images/netfalls/lefkada-location-kathisma-144839.jpg" class="img">
    <img id="img_3" src="https://www.lefkada-nefeli.gr/images/beaches/kathisma.jpg" class="img">
    <button id="previous" class="controls btn-left">&#9664;</button>
    <button id="next" class="controls btn-right">&#9654;</button>
</div>

CSS

.slider {
    margin-top: 15px;
    width: 100%;
    height: 500px;
    border: 5px solid cadetblue;
    position: relative;
    overflow: hidden;
}

.slider img {
    display: none;
    width: 100%;
    height: 500px;
    position: absolute;
}

.slider .btn-left {
    position: absolute;
    top: 250px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: transparent;
    border: 4px solid cadetblue;
    color: cadetblue;
    font-size: 25px;
    margin-left: 10px;
    font-weight: bold;
    z-index: 10;
    outline: none;
    cursor: pointer;
}

.slider .btn-right {
    position: relative;
    float: right;
    top: 250px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: transparent;
    border: 4px solid cadetblue;
    color: cadetblue;
    font-size: 25px;
    margin-right: 15px;
    font-weight: bold;
    z-index: 10;
    outline: none;
    cursor: pointer;
}

.rubber-indicator {
    width: 100%;
}

.page-dots {
    background-color: transparent;
    border: 2px solid cadetblue;
    list-style: none;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 40px;
    position: absolute;
    z-index: 2;
    width: 100%;
    max-width: 190px;
    text-align: center;
    top: 475px;
    left: 50%;
    transform: translateY(-100%) translateX(-50%);
    outline: none;
}

.page-dots .dot {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: cadetblue;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all .4s cubic-bezier(.3, 0, 0, 1.3);
}

.page-dots .current {
    background: cadetblue;
    position: relative;
    transform: scale(2);
    border-color: steelblue;
}

.hide {
    //opacity: 0;
    display: none;
    transition: all 0.5s ease;
    z-index: 0;
}

.img.show {
    opacity: 1;
    z-index: 1;
    display: block;
}

JavaScript

var images = document.querySelectorAll(".slider img");
var prev = document.querySelector("#previous");
var next = document.querySelector("#next");
var dots = document.querySelectorAll(".dot");
currentSlide = 0

prev.onclick = function() {
	goToPrev();
}

next.onclick = function() {
	goToNext();
}

setInterval(function() {
	goToNext();
}, 2000);

function goToPrev() {
	if(currentSlide == 0) {
		currentSlide = images.length - 1;
	} else {
		currentSlide--;
	}
	
	document.querySelector(".img.show").classList.remove("show");
	images[currentSlide].classList.add("show");
	
	document.querySelector(".dot.current").classList.remove("current");
	dots[currentSlide].classList.add("current");
}

function goToNext() {
	if(currentSlide == images.length - 1) {
		currentSlide = 0;
	} else {
		currentSlide++;
	}
	
	document.querySelector(".img.show").classList.remove("show");
	images[currentSlide].classList.add("show");
	
	document.querySelector(".dot.current").classList.remove("current");
	dots[currentSlide].classList.add("current");
}