JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="ecoist-slider">
  <div class="slider-container">
    <div class="item" data-item="0">0</div>
    <div class="item" data-item="1">1</div>
    <div class="item" data-item="2">2</div>
    <div class="item" data-item="3">3</div>
    <div class="item" data-item="4">4</div>
  </div>
</div>

CSS

div.item {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 8px;
}
.item.active {
    background: red;
}

JavaScript

function ecoistSlider() {
	var elems = document.querySelectorAll('#ecoist-slider .slider-container .item'),
    active = 0,
    prev,
    twoPrev;
    elems.forEach(function(el) {
        el.addEventListener('click', function(e) {
        	elems[active].classList.remove('active')
			this.classList.add('active')
            active = Number(this.dataset.item);
            if(elems[active - 1] === undefined){
            	prev = elems[elems.length - active - 1];
            }else {
            	prev = elems[active - 1]
            }
            if( active == 0){
            	twoPrev = elems[elems.length - 2]
            }else {
                if(elems[active - 2] === undefined){
                    twoPrev = elems[elems.length - active];
                }else {
                    twoPrev = elems[active - 2];
                }
            }
            /* if(active === elems.length) */
            console.log(prev,twoPrev,active)
        })
    })
    elems[active].classList.add('active')
}
ecoistSlider();