1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación dotsslidercarousel

Dot Slide Indicators

Indicadores de puntos para navegación entre diapositivas de carruseles interactivos.

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { DotSlideIndicators } from 'astro-component-kit';
---

<DotNavigationSlider>Content</DotNavigationSlider>
--- import { DotSlideIndicators } from 'astro-component-kit'; --- <DotNavigationSlider>Content</DotNavigationSlider>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/DotSlideIndicators.astro:

astro 
---
---
<div class="dot-nav">
  <button class="active"></button>
  <button></button>
  <button></button>
  <button></button>
</div>
<style>
  .dot-nav { display: flex; gap: 10px; justify-content: center; }
  .dot-nav button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.2); cursor: pointer; transition: 0.3s; }
  .dot-nav button.active { width: 24px; border-radius: 5px; background: #6366f1; }
</style>
--- --- <div class="dot-nav"> <button class="active"></button> <button></button> <button></button> <button></button> </div> <style> .dot-nav { display: flex; gap: 10px; justify-content: center; } .dot-nav button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.2); cursor: pointer; transition: 0.3s; } .dot-nav button.active { width: 24px; border-radius: 5px; background: #6366f1; } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
DotSlideIndicators.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
dotsslidercarousel