1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Навигация dotsslidercarousel

Dot Slide Indicators

Точечная навигация (буллеты) для переключения слайдов в каруселях.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

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

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

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

Краткая информация

Категория
Навигация
Имя файла
DotSlideIndicators.astro
Зависимости
Нет — чистый Astro + CSS
Теги
dotsslidercarousel