⚡ Productividad en VS Code

Snippets de Autocompletado

Escribe estos prefijos dentro de cualquier archivo .astro para generar la estructura completa del carrusel en segundos con la sintaxis corta Sw:

swiper-basicVS Code Trigger

Carrusel Básico (<Sw>)

Inserta un carrusel responsivo con navegación y paginación listo para usar.

Carrusel Básico (<Sw>)

swiper-basic

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

<Sw slidesPerView={3} spaceBetween={20} navigation pagination loop>
  <Sw.Wrap>
    <Sw.Slide class="h-64 rounded-2xl bg-zinc-800 text-white flex items-center justify-center">Slide 1</Sw.Slide>
    <Sw.Slide class="h-64 rounded-2xl bg-zinc-800 text-white flex items-center justify-center">Slide 2</Sw.Slide>
    <Sw.Slide class="h-64 rounded-2xl bg-zinc-800 text-white flex items-center justify-center">Slide 3</Sw.Slide>
  </Sw.Wrap>
  <Sw.Prev />
  <Sw.Next />
  <Sw.Pag />
</Sw>

swiper-autoplayVS Code Trigger

Autoplay con Observer (<Sw>)

Carrusel con pausa inteligente en hover y suspensión fuera de pantalla.

Autoplay con Observer (<Sw>)

swiper-autoplay

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

<Sw autoplay={{ delay: 3000, pauseOnMouseEnter: true }} pauseWhenHidden loop navigation pagination>
  <Sw.Wrap>
    <Sw.Slide class="h-80 bg-indigo-600 text-white flex items-center justify-center font-bold">Slide 1</Sw.Slide>
    <Sw.Slide class="h-80 bg-purple-600 text-white flex items-center justify-center font-bold">Slide 2</Sw.Slide>
  </Sw.Wrap>
  <Sw.Pag />
</Sw>

swiper-cardsVS Code Trigger

Efecto 3D Cards (<Sw>)

Pila de tarjetas tridimensional interactiva con cursor de agarre.

Efecto 3D Cards (<Sw>)

swiper-cards

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

<Sw effect="cards" grabCursor={true} class="w-72 h-96 mx-auto my-6">
  <Sw.Wrap>
    <Sw.Slide class="rounded-3xl bg-indigo-600 text-white p-6 shadow-2xl">Tarjeta 1</Sw.Slide>
    <Sw.Slide class="rounded-3xl bg-purple-600 text-white p-6 shadow-2xl">Tarjeta 2</Sw.Slide>
    <Sw.Slide class="rounded-3xl bg-pink-600 text-white p-6 shadow-2xl">Tarjeta 3</Sw.Slide>
  </Sw.Wrap>
</Sw>

swiper-thumbsVS Code Trigger

Galería de Miniaturas (<Sw>)

Carrusel principal sincronizado automáticamente con carrusel inferior.

Galería de Miniaturas (<Sw>)

swiper-thumbs

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

<!-- Carrusel Principal -->
<Sw thumbs="#thumbs-track" navigation loop class="mb-4">
  <Sw.Wrap>
    <Sw.Slide class="h-80 rounded-2xl bg-zinc-800 text-white flex items-center justify-center">Foto 1</Sw.Slide>
    <Sw.Slide class="h-80 rounded-2xl bg-zinc-800 text-white flex items-center justify-center">Foto 2</Sw.Slide>
  </Sw.Wrap>
  <Sw.Prev />
  <Sw.Next />
</Sw>

<!-- Pista de Miniaturas -->
<Sw id="thumbs-track" slidesPerView={4} spaceBetween={12} freeMode watchSlidesProgress>
  <Sw.Wrap>
    <Sw.Slide class="h-20 rounded-xl bg-zinc-700 text-white flex items-center justify-center text-xs">Mini 1</Sw.Slide>
    <Sw.Slide class="h-20 rounded-xl bg-zinc-700 text-white flex items-center justify-center text-xs">Mini 2</Sw.Slide>
  </Sw.Wrap>
</Sw>