Navigation dotsslidercarousel

Dot Slide Indicators

Abstract dot-based navigation for sliders or carousel components.

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/DotSlideIndicators.astro and paste the following code:

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>

Quick Info

Category
Navigation
Filename
DotSlideIndicators.astro
Dependencies
None — pure Astro + CSS
Tags
dotsslidercarousel