Mini Slider de Imágenes

El JS Mini Slider de Imágenes es una de las funciones visuales más atractivas incluidas en la plantilla NichoClean v2.0. Este pequeño pero potente script convierte cualquier bloque de galería en un slider automático y responsivo, mostrando una imagen principal con tres miniaturas interactivas a la derecha. Ideal para destacar tus últimas publicaciones, proyectos o secciones visuales del blog.

📸 ¿Qué hace el Mini Slider de Imágenes?

El Mini Slider transforma el bloque .galeria-feed.slider generado desde el feed de Blogger en una presentación dinámica de imágenes sin necesidad de librerías externas ni plugins pesados. Se ejecuta automáticamente al cargar la página, muestra una imagen principal con su título, y permite cambiar entre miniaturas de forma automática o manual.

  • 100% automático: cambia de imagen cada 4 segundos.
  • Interactividad: al hacer clic en una miniatura, la imagen principal se actualiza instantáneamente.
  • Ligero y rápido: sin dependencias, optimizado para SEO y velocidad de carga.
  • Totalmente responsive: se adapta perfectamente al diseño minimalista de NichoClean v2.0.

🧩 Cómo insertar el Mini Slider en tu plantilla NichoClean v2.0

Para activar este efecto en tu blog, simplemente necesitas tener un bloque de galería con la clase galeria-feed slider. Puedes insertar este shortcode en cualquier parte de una entrada o widget HTML:

<div class='galeria-feed slider' data-etiqueta='Diseño' data-cantidad='6'></div>

El parámetro data-etiqueta indica la etiqueta del feed de Blogger desde donde se extraerán las imágenes, y data-cantidad define cuántas publicaciones cargar. Recomendamos entre 4 y 8 para una transición fluida.

⚙️ Código JavaScript del Mini Slider

El siguiente script ya viene integrado en la plantilla NichoClean v2.0, pero si deseas implementarlo manualmente o hacer pruebas, aquí tienes el código completo parseado para Blogger:

<!-- 6. Js mini slider de imagenes -->
<script>//<![CDATA[

window.addEventListener("load", () => {
  setTimeout(() => {
    const galeria = document.querySelector(".galeria-feed.slider");
    if (!galeria) return;

    const items = galeria.querySelectorAll(".item-slider");
    if (items.length < 4) return;

    const arrayItems = Array.from(items).filter(item =>
      item.querySelector("img") &&
      item.querySelector("h3") &&
      item.querySelector("a")
    );

    if (arrayItems.length < 4) return;

    // Estructura base
    const contenedorPrincipal = document.createElement("div");
    contenedorPrincipal.className = "imagen-principal";

    const contenedorMiniaturas = document.createElement("div");
    contenedorMiniaturas.className = "miniaturas";

    const imagenPrincipal = document.createElement("img");
    const tituloPrincipal = document.createElement("h3");

    contenedorPrincipal.appendChild(imagenPrincipal);
    contenedorPrincipal.appendChild(tituloPrincipal);

    galeria.innerHTML = "";
    galeria.appendChild(contenedorPrincipal);
    galeria.appendChild(contenedorMiniaturas);

    // Función para mostrar un item
    function mostrarItem(item) {
      const img = item.querySelector("img");
      const h3 = item.querySelector("h3");
      const link = item.querySelector("a");

      if (!img || !h3 || !link) return;

      imagenPrincipal.src = img.src;
      tituloPrincipal.textContent = h3.textContent;

      contenedorPrincipal.onclick = () => {
        window.open(link.href, "_blank");
      };
    }

    // Generar miniaturas iniciales
    let indices = [...Array(arrayItems.length).keys()];
    indices = indices.sort(() => 0.5 - Math.random());

    let principalIndex = indices.shift();
    mostrarItem(arrayItems[principalIndex]);

    const miniQueue = indices.slice(0, 3);

    function renderMiniaturas() {
      contenedorMiniaturas.innerHTML = "";
      miniQueue.forEach((idx, i) => {
        const item = arrayItems[idx];
        const img = item.querySelector("img");
        const h3 = item.querySelector("h3");

        const mini = document.createElement("div");
        mini.className = "miniatura";

        const miniImg = document.createElement("img");
        miniImg.src = img.src;

        const miniTitle = document.createElement("h4");
        miniTitle.textContent = h3.textContent;

        mini.appendChild(miniImg);
        mini.appendChild(miniTitle);

        mini.onclick = () => {
          mostrarItem(item);
          miniQueue.splice(i, 1);
          miniQueue.unshift(principalIndex);
          principalIndex = idx;
          renderMiniaturas();
        };

        contenedorMiniaturas.appendChild(mini);
      });
    }

    renderMiniaturas();

    // Cambio automático cada 4 segundos
    setInterval(() => {
      const nextIndex = miniQueue.shift();
      miniQueue.push(principalIndex);
      principalIndex = nextIndex;
      mostrarItem(arrayItems[principalIndex]);
      renderMiniaturas();
    }, 4000);
  }, 1000);
});

//]]>
</script>

🎨 Estilo visual y personalización

El diseño del Mini Slider se adapta automáticamente a la estética minimalista de NichoClean v2.0, pero puedes personalizar detalles desde tu hoja CSS. Por ejemplo, ajustar el tamaño de las miniaturas o agregar un borde suave:

.galeria-feed.slider .imagen-principal img {
  width: 100%;
  border-radius: 12px;
}
.galeria-feed.slider .miniaturas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.galeria-feed.slider .miniatura img {
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .3s;
}
.galeria-feed.slider .miniatura:hover img {
  opacity: .8;
}

Este bloque CSS mantiene el estilo limpio, con esquinas redondeadas y una transición suave al pasar el cursor. Puedes combinarlo con el modo oscuro o claro sin afectar la coherencia visual.

⚠️ Recomendaciones importantes

  • Verifica que el feed del blog tenga imágenes destacadas y títulos en las entradas seleccionadas.
  • No coloques más de un slider por página sin ajustar el código, ya que el script actual busca el primer bloque .galeria-feed.slider.
  • Si no aparecen imágenes, revisa que la etiqueta especificada en data-etiqueta exista en tus entradas.

🚀 Conclusión

El Mini Slider de Imágenes es una muestra perfecta del equilibrio entre diseño minimalista y funcionalidad dinámica que caracteriza a la plantilla NichoClean v2.0. Su implementación es sencilla, mejora la retención visual del usuario y refuerza el valor estético del blog sin sacrificar rendimiento ni SEO.

Úsalo para destacar tus artículos más recientes, galerías de productos o portafolios visuales. Recuerda: la clave del éxito en un blog moderno es mostrar el contenido con estilo y velocidad.