✨ Constructor Visual en Vivo

Interactive Playground

Ajusta parámetros, efectos y controles en tiempo real. Obtén el código Astro exacto con sintaxis concisa <Sw> listo para tu proyecto.

Configuración de Swiper

Preset Rápido (Opcional)

Efecto Visual

Slides Visibles: 1

Espacio (px): 20

Velocidad (ms): 400

Micro-Controles v0.15.0

<Sw.Toggle /><Sw.Count /><Sw.Full />

Vista Previa Interactiva

Modo: Custom

Slide 1

Astro 7+ & Swiper v14

Slide 2

Tailwind CSS v4 Nativo

Slide 3

Compound Component <Sw>

Slide 4

Zero-JS Fallback con CSS Scroll-Snap

01 / 01

Código Astro Generado

---
import Sw from 'astro-swiper-zosei';
---

<Sw
  slidesPerView={1}
  spaceBetween={20}
  loop={true}
  navigation={true}
  pagination={{ clickable: true }}
  class="w-full max-w-xl h-80 rounded-2xl overflow-hidden shadow-xl"
>
  <Sw.Wrap>
    <Sw.Slide>Slide 1</Sw.Slide>
    <Sw.Slide>Slide 2</Sw.Slide>
    <Sw.Slide>Slide 3</Sw.Slide>
  </Sw.Wrap>
  <Sw.Prev variant="glass" />
  <Sw.Next variant="glass" />
  <Sw.Pag variant="pills" color="indigo" />
  <Sw.Count position="top-right" />
</Sw>