JSFiddle - React, Tailwind, and code Playground

by colorkid

HTML

<div class="slider_artists">
<img src="http://s017.radikal.ru/i410/1512/2a/9ae985fa4ada.png">
		<img src="http://s010.radikal.ru/i311/1512/f8/0f44507beb7c.png">
		<img src="http://s012.radikal.ru/i320/1512/ae/10cd9e0466dc.png">
		<img src="http://s017.radikal.ru/i411/1512/90/d9a8e430d0a1.png">
				</div>

CSS

.slider_artists {
  max-width: 100%;
  max-height: 225px;
  position: relative;
  margin-bottom: 30px;
  background: #DCDCDC;
  font-size: 0px;
  overflow: hidden;
}
.slider_artists img {
  visibility: hidden;
  opacity: 0;
  transition: 1s;
}
.slider_artists .show {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  opacity: 1;
  transition: 1s;
}
.slider_artists .toggles_slider {
  position: absolute;
  bottom: 10%;
  right: 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 10px;
  background: #282C2B;
}
.slider_artists .toggles_slider li {
  width: 12.5px;
  height: 12.5px;
  margin-right: 10px;
  border-radius: 10px;
  background: #9A9A9A;
  cursor: pointer;
}
.slider_artists .toggles_slider li:last-child {
  margin-right: 0;
}
.slider_artists .toggles_slider li:hover {
  background: red;
}
.slider_artists .toggles_slider .toggle_active {
  background: red;
}

JavaScript

var slider = document.querySelector(".slider_artists");
var sliderLength = document.querySelectorAll(".slider_artists img");

var toggles = document.createElement('ul');
toggles.className = "toggles_slider";
slider.appendChild(toggles);

for(i = 0; i < sliderLength.length; i++){
  var toggle = document.createElement('li');
  toggles.appendChild(toggle);
}

sliderLength[0].classList.add("show");



var togglesLength = document.querySelectorAll(".toggles_slider li");

for (var i = 0; i < togglesLength.length; i++) {
    clickControl(togglesLength[i]);
}

function toggleFilter(control) {
      for (var i = 0; i < togglesLength.length; i++) {
          togglesLength[i].classList.remove('toggle_active');
      }

      control.classList.add('toggle_active');
      
  }

  function clickControl(control) {
      control.addEventListener('click', function() {
          toggleFilter(control);

          });

}

togglesLength[0].classList.add('toggle_active');   // Finish toggles



function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') &gt; -1;
}


function getPos(element) {
    var rang = 0;
    while(element = element.previousElementSibling) {
       rang++;
    }
    
    return rang;
}

toggles.addEventListener('click', function(event) {
  for(i = 0; i < sliderLength.length; i++){
    sliderLength[i].classList.remove("show");
  }
  var position = getPos(event.target);
  	sliderLength[position].classList.add("show");
});