Sección con doble slider sincronizado (100% Tailwind)

He preparado una nueva versión de la sección de galería con dos sliders sincronizados (principal + miniaturas) pensada para usarla con Bricks y Tailwind.

La idea es muy sencilla:

• Un slider principal para la imagen grande.
• Un slider de miniaturas sincronizado con el principal.
• Flechas de navegación (prev/next) que puedes colocar donde quieras en la sección.
• Todo el estilo está resuelto solo con clases de Tailwind, sin CSS extra.

¿Qué aporta esta nueva versión?

• El JS está muy simplificado:
  solo hace tres cosas → inicializa los sliders, sincroniza main + thumbs y conecta las flechas de navegación.
• El archivo incluye código comentado que puedes eliminar si no lo necesitas (por ejemplo, la parte de la barra de progreso).

Copias la estructura HTML de la sección (main + thumbs).

• Mantienes los atributos clave:

  • bt-data-slider para identificar cada slider.
  • bt-data-sync para vincular el slider principal con el de miniaturas.

• Añades las flechas donde quieras en el layout y les dejas:

  • class="bt-slidernav-prev ..."
  • class="bt-slidernav-next ..."
  • El mismo bt-data-slider que use tu slider.

• Ajustas las clases de Tailwind al diseño de tu proyecto (colores, tamaños, espaciados, etc.).