TUTORIAL 1: Polaroid con fotos intercambiables

Holaaa, en este tutorial les enseño cómo hice mi polaroid (de mis mascotitas jiji) con varias fotos, botones para cambiar entre ellas, contador, nombre y descripción uwuw

No necesitan saber mucho de HTML, solo seguir los pasos y cambiar las partes q les indico

(*/ω＼*)

Código general:

<style>
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Quicksand:wght@400;500;600&display=swap');

/* CONTENEDOR PRINCIPAL */
.polaroid-container {
  width: 220px;
  margin: 10px auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Quicksand', sans-serif;
}

/* TARJETA POLAROID */
.polaroid-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 5px;
  padding: 12px 12px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.polaroid-container:hover .polaroid-card {
  transform: translateY(-2px) rotate(-0.4deg);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12), 0 3px 7px rgba(0, 0, 0, 0.06);
}

/* MARCO DE FOTOS */
.pet-photo-frame {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

.pet-photo-frame img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 0.6s ease, filter 0.5s ease;
}

.pet-photo-frame img.active {
  opacity: 1;
}

.pet-photo-frame:hover img.active {
  transform: scale(1.045);
  filter: brightness(1.04) saturate(1.05);
}

/* FILA DE NAVEGACIÓN */
.polaroid-bottom-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px;
  padding: 0 4px;
}

/* CONTADOR NUMÉRICO */
.pet-num {
  color: #888888;
  font-family: 'Quicksand', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  margin: 0 auto;
}

/* BOTONES DE FLECHA */
.pet-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #555555;
  border: 2px solid #cccccc;
  box-sizing: content-box;
  font-family: 'Quicksand', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.pet-btn:hover {
  background-color: #ffffff;
  border-color: #999999;
  transform: scale(1.08);
}

/* TEXTOS Y NOMBRES */
.pet-info {
  text-align: center;
  margin-top: 6px;
  transition: transform 0.3s ease;
}

.polaroid-container:hover .pet-info {
  transform: translateY(-1px);
}

.pet-title-name {
  color: #333333;
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 13px;
  margin: 0;
  transition: color 0.25s ease;
}

.polaroid-container:hover .pet-title-name {
  color: #000000;
}

.pet-desc {
  color: #777777;
  font-family: 'Quicksand', sans-serif;
  font-size: 10px;
  font-weight: 500;
  margin: 1px 0 0;
}
</style>

<div class="polaroid-container">
  <div class="polaroid-card">
    <div class="pet-photo-frame">
      <img class="pet-pic active" src="URL_DE_TU_FOTO_1.jpg" alt="Foto 1" />
      <img class="pet-pic" src="URL_DE_TU_FOTO_2.jpg" alt="Foto 2" />
      <img class="pet-pic" src="URL_DE_TU_FOTO_3.jpg" alt="Foto 3" />
      <img class="pet-pic" src="URL_DE_TU_FOTO_4.jpg" alt="Foto 4" />
      <img class="pet-pic" src="URL_DE_TU_FOTO_5.jpg" alt="Foto 5" />
      <img class="pet-pic" src="URL_DE_TU_FOTO_6.jpg" alt="Foto 6" />
    </div>
    <div class="polaroid-bottom-row">
      <button class="pet-btn pet-btn-prev" type="button">‹</button>
      <div class="pet-num"><span id="pet-idx">1</span> / <span id="pet-total">6</span></div>
      <button class="pet-btn pet-btn-next" type="button">›</button>
    </div>
  </div>
  <div class="pet-info">
    <div class="pet-title-name" id="pet-lbl-name">Nombre 1</div>
    <p class="pet-desc" id="pet-lbl-desc">~ descripción ~</p>
  </div>
</div>

<script>
(function() {
  const pics = document.querySelectorAll('.pet-pic');
  const btnPrev = document.querySelector('.pet-btn-prev');
  const btnNext = document.querySelector('.pet-btn-next');
  const idxTxt = document.getElementById('pet-idx');
  const totalTxt = document.getElementById('pet-total');
  const nameTxt = document.getElementById('pet-lbl-name');
  const descTxt = document.getElementById('pet-lbl-desc');
  const data = [
    { name: "Nombre 1", desc: "~ descripción 1 ~" },
    { name: "Nombre 2", desc: "~ descripción 2 ~" },
    { name: "Nombre 3", desc: "~ descripción 3 ~" },
    { name: "Nombre 4", desc: "~ descripción 4 ~" },
    { name: "Nombre 5", desc: "~ descripción 5 ~" },
    { name: "Nombre 6", desc: "~ descripción 6 ~" }
  ];
  let activeIdx = 0;
  if (totalTxt) { totalTxt.textContent = pics.length; }
  function updateSlide(i) {
    pics.forEach(function(p) { p.classList.remove('active'); });
    pics[i].classList.add('active');
    idxTxt.textContent = i + 1;
    nameTxt.textContent = data[i].name || "";
    descTxt.textContent = data[i].desc || "";
  }
  btnNext.addEventListener('click', function() {
    activeIdx = (activeIdx + 1) % pics.length;
    updateSlide(activeIdx);
  });
  btnPrev.addEventListener('click', function() {
    activeIdx = (activeIdx - 1 + pics.length) % pics.length;
    updateSlide(activeIdx);
  });
  updateSlide(activeIdx);
})();
</script>

Como pueden ver, en el mismo código puse subtítulos de las áreas correspondientes para q sea mas fácil de reconocer.

1. Personalizar los colores

Fondo de la polaroid
Busca: ''background: #fffdfd;''
Cambia este color para modificar el fondo de toda la tarjeta.

Fondo detrás de las fotos
Busca: ''background: #f8f4f5;''
Este es el color que aparece detrás de las imágenes.

Borde del marco de las fotos
Busca: ''border: 1px solid #f1e4e9;''
Puedes cambiarlo para modificar el bordecito alrededor de las fotos.

Color del contador
Busca: ''color: #c6aeb8;''
Esto cambia el color de: < 1 / 6 >

Color del interior del botón de cambio

Busca: ''background-color: #C1D968;''
Este es el color del interior de los círculos.

Color de la flecha del botón
Busca: ''color: #ffffff;''
Esto cambia el color de las flechitas ‹ ›.

Color del borde del botón
Busca: ''border: 3px solid #EB98C0;''
Esto cambia el borde que rodea los botones.

Color al pasar el mouse en el botón
Cuando pasas el cursor sobre el botón, cambia de color.
Busca: ''background-color: #A3C13D;''
Este es el color del botón al pasar el mouse.
Y:
''border-color: #e582b1;''
Este es el color del borde al pasar el mouse.

Cambiar el color del nombre
Busca: ''color: #D977A4;''
Este es el color del nombre que aparece debajo de la polaroid.

Color del nombre al pasar el mouse
Un poquito más abajo encontrarás: ''color: #c46290;''
Este es el color que tendrá el nombre cuando pases el cursor encima.

Cambiar el color de la descripción

Busca: ''color: #c4adb7;''
Este controla el color de la descripción que aparece debajo del nombre.

Cambiar las fotos

Busca:

<img class="pet-pic active" src="URL_DE_TU_FOTO_1.jpg" alt="Foto 1" />

<img class="pet-pic" src="URL_DE_TU_FOTO_2.jpg" alt="Foto 2" />

<img class="pet-pic" src="URL_DE_TU_FOTO_3.jpg" alt="Foto 3" />

Y reemplaza en ''URL_DE_TU_FOTO_1.jpg''




¡IMPORTANTE! En la primera foto tiene: class="pet-pic active"
No quites active de la primera foto, porque esa es la que aparecerá inicialmente.
Las demás solamente llevan: class="pet-pic"

2. Cambiar nombre y descripciones

Busca esta parte al final del código:

const data = [
  { name: "Nombre 1", desc: "~ descripción 1 ~" },
  { name: "Nombre 2", desc: "~ descripción 2 ~" },
  { name: "Nombre 3", desc: "~ descripción 3 ~" },
  { name: "Nombre 4", desc: "~ descripción 4 ~" },
  { name: "Nombre 5", desc: "~ descripción 5 ~" },
  { name: "Nombre 6", desc: "~ descripción 6 ~" }
];
Aquí puedes poner la información de cada foto. 
(Ejm: { name: "Luna", desc: "~ mi pequeña ~" }, )

3. Cambiar cantidad de fotos
El código viene preparado para 6 fotos. Puedes ver el número aquí:
''<span id="pet-idx">1</span> / 6'' (Si tienes por ejemplo 4 fotos, cambia el 6 
por 4.

Ahora, si quieres agregar más fotos, simplemente añade otra imagen: 
<img class="pet-pic" src="URL_DE_TU_FOTO_7.jpg" alt="Foto 7" />
Y añade también su nombre y descripción.

Eso seria tooodo :33
¡Espero q a la personita q me lo ha pedido le haya gustado!