<div class="slider">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>

body {
  display: flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.slider{
  display:flex;
  width:600px;
  justify-content:space-between;
}

.slide{
  width:130px;
  height:130px;
  background-color:lime;
  border:1px solid black;
  display:flex;
  align-items:center;
  justify-content:center;
}

.active{
  width:50px;
  height:50px;
  background-color:red;
}

const slides = document.querySelectorAll(".slide")
const selectSlide = (e) => {
  for(let iterator = 0; iterator < slides.length; iterator++ ){
    slides[iterator].classList.remove("active")
  }
  
  e.target.classList.add("active")
}

for(let iterator = 0; iterator < slides.length; iterator++ ){
    slides[iterator].addEventListener("click", selectSlide, false)
  }