Paginación de cinta métrica
Arrastra una cinta métrica amarilla con inercia hasta que tu página quede bajo la línea roja, o avanza con las flechas.
Ajustes
Código
<nav class="uvq12-tp" aria-label="Paginación"><p class="rd"><span>Página</span><b class="pn">7</b><small>/ 24</small></p><div class="cs"><button type="button" class="pv" aria-label="Página anterior"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="vw" role="slider" tabindex="0" aria-label="Página" aria-valuemin="1" aria-valuemax="24" aria-valuenow="7"><div class="tp"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span></div><i class="hl" aria-hidden="true"></i></div><button type="button" class="nx" aria-label="Página siguiente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></nav>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
Una paginación dibujada como cinta métrica amarilla: arrástrala a un lado, suéltala y sigue deslizándose con inercia hasta encajar la página más cercana bajo una línea roja. También funcionan las flechas, el teclado y pulsar cualquier número, y el contador grande se actualiza al momento. Encaja en galerías largas, catálogos y archivos donde recorrer es más rápido que ir página a página.
El color principal pinta la cinta y el secundario la línea de lectura. Cambia el número de páginas en los datos y deja el contador arriba para que siempre se sepa en qué página estás.