<div class="images-container">

  <div class="image-card">

    <img src="https://picsum.photos/id/84/1280/848" alt="" />

  </div>

​

  <div class="image-card active">

    <img src="https://picsum.photos/id/103/1280/848" alt="" />

  </div>

​

  <div class="image-card">

    <img src="https://picsum.photos/id/201/1280/848" alt="" />

  </div>

​

  <div class="image-card">

    <img src="https://picsum.photos/id/219/1280/848" alt="" />

  </div>

</div>

​

<div class='indicator'>

  <button class="dot"></button>

  <button class="dot active"></button>

  <button class="dot"></button>

  <button class="dot"></button>

</div>

* {

  box-sizing: border-box;

}

​

body {

  margin: 0;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;

  padding: 100px;

}

​

.images-container {

  max-width: 400px;

  width: 100%;

  height: 250px;

  display: grid;

  justify-content: center;

  align-items: center;

  gap: 10px;

  width: 100%;

  grid-template-columns: repeat(4, 1fr);

}

​

.image-card {

  aspect-ratio: 30/25;

  --width: 80px;

  width: var(--width);

  border-radius: 10px;

  overflow: hidden;

  position: relative;

  transition: width 500ms, height 500ms, filter 500ms;

  filter: grayscale(100%);

  cursor: pointer;

}

​

.image-card.active {

  --width: 300px;

  filter: none;

}

​

img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

​

.indicator {

  margin-top: 50px;

  display: flex;

  justify-content: center;

  gap: 5px;

  align-items: center;

}

​

.indicator .dot {

  width: 10px;

  display: block;

  height: 10px;

  border-radius: 50%;

  background-color: #eee;

  cursor: pointer;

  border: none;

  padding: 0;

  transition: background-color 500ms;

}

​

.indicator .dot:hover,

.indicator .dot.active {

  background-color: black;

}

const imageCards = document.querySelectorAll(".image-card");

const indicators = document.querySelectorAll(".indicator .dot");

​

function eventHandler(index) {

  imageCards.forEach((card, i) => {

    card.classList.remove("active");

    indicators[i].classList.remove("active");

  });

​

  imageCards[index].classList.add("active");

  indicators[index].classList.add("active");

}

​

imageCards.forEach((card, i) => {

  card.addEventListener("click", () => eventHandler(i));

  indicators[i].addEventListener('click', () => eventHandler(i))

});

​