JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<img src="http://picsum.photos/300/300" alt="" class="slider-img" style="display: none;">
<img src="http://picsum.photos/400/400" alt="" class="slider-img" style="display: none;">
<img src="http://picsum.photos/250/250" alt="" class="slider-img" style="display: none;">
<img src="http://picsum.photos/450/450" alt="" class="slider-img" style="display: none;">
<div id="slider-body">
    <div id="box-1">
        <div class="image"></div>
    </div>
    <div id="box-2">
        <div class="image"></div>
    </div>
</div>
<button class="slider-dot">1</button>
<button class="slider-dot">2</button>
<button class="slider-dot">3</button>
<button class="slider-dot">4</button>

CSS

.image {
    padding-top: 20%;
}

JavaScript

function slider(){
	var items = document.querySelectorAll('.slider-img'),
    	dots = document.querySelectorAll('.slider-dot'),
    	time = 0,
        box_1 = document.querySelector('#box-1 .image'),
        box_2 = document.querySelector('#box-2 .image'),
        state = 0;
    	
        box_1.style.background = "url(" + items[0].getAttribute('src') + ')';
        box_2.style.background = "url(" + items[1].getAttribute('src') + ')';
    
    function changeSlide(){
        requestAnimationFrame(changeSlide)
    }
    changeSlide();
}
slider();