1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegacióndotsslidercarousel

Dot Slide Indicators

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

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { DotNavigationSlider } from 'react-component-kit-ui/navigation';

<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/DotNavigationSlider.tsx + DotNavigationSlider.css:

DotNavigationSlider.tsx
'use client';

import './DotNavigationSlider.css';

/** DotNavigationSlider — ported from astro-component-kit. */
export interface DotNavigationSliderProps {
}

export function DotNavigationSlider({}: DotNavigationSliderProps) {
  return (
    <>
      <div className="dot-nav" data-rk-4601d6="">
        <button className="active" data-rk-4601d6=""></button>
        <button data-rk-4601d6=""></button>
        <button data-rk-4601d6=""></button>
        <button data-rk-4601d6=""></button>
      </div>
    </>
  );
}

export default DotNavigationSlider;
DotNavigationSlider.css
/* DotNavigationSlider — ported from astro-component-kit (navigation/DotNavigationSlider.astro) */

.dot-nav:where([data-rk-4601d6]) { display: flex; gap: 10px; justify-content: center; }
.dot-nav:where([data-rk-4601d6]) button:where([data-rk-4601d6]) { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.2); cursor: pointer; transition: 0.3s; }
.dot-nav:where([data-rk-4601d6]) button.active:where([data-rk-4601d6]) { width: 24px; border-radius: 5px; background: #6366f1; }

Información Rápida

Categoría
Navegación
Nombre de archivo
DotNavigationSlider.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
dotsslidercarousel