Swiper JS

pnpm add swiper

Component

---
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

import { ChevronRight, ChevronLeft } from 'lucide-astro'
---

<div class="swiper space-y-6 rounded-2xl bg-slate-100 !py-8">
  <div class="swiper-wrapper">
    <slot />
  </div>

  <div class="flex justify-center gap-x-2">
    <div
      class="swiper-prev inline-flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-black duration-300 hover:bg-black/75">
      <ChevronLeft class="-ml-1 h-8 w-8 stroke-1 text-white" />
    </div>
    <div
      class="swiper-next inline-flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-black duration-300 hover:bg-black/75">
      <ChevronRight class="-mr-1 h-8 w-8 stroke-1 text-white" />
    </div>
  </div>
</div>

<script>
  import Swiper from 'swiper'
  import { Navigation, Pagination, Scrollbar } from 'swiper/modules'

  const swiper = new Swiper('.swiper', {
    modules: [Navigation],

    direction: 'horizontal',
    loop: true,

    navigation: {
      nextEl: '.swiper-next',
      prevEl: '.swiper-prev',
    },

    slidesPerView: 'auto',
    centeredSlides: true,
    initialSlide: 0,
    spaceBetween: 20,
  })
</script>

MDX Post

---
title: "Title"
description: "Description"
---

import Swiper from "../../components/content/Swiper.astro";

import { Picture } from "astro:assets";

import myImage1 from './images/team/user1.jpeg';
import myImage2 from './images/team/user2.jpeg';
import myImage3 from './images/team/user3.jpeg';
import myImage4 from './images/team/user4.jpeg';
import myImage5 from './images/team/user5.jpeg';
import myImage6 from './images/team/user6.jpeg';

<Swiper>
  <div class="swiper-slide !w-2/3">
    <Picture
      src={myImage1}
      alt="001"
      width={1024}
      height={1024}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
      loading="eager"
      class="object-cover h-full rounded-2xl w-full"
    />
  </div>

<div class="swiper-slide !w-2/3">
  <Picture
      src={myImage2}
      alt="002"
      width={1024}
      height={1024}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
      loading="eager"
      class="object-cover h-full rounded-2xl w-full"
    />
  </div>

  <div class="swiper-slide !w-2/3">
    <Picture
      src={myImage3}
      alt="003"
      width={1024}
      height={1024}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
      loading="eager"
      class="object-cover h-full rounded-2xl w-full"
    />
  </div>

  <div class="swiper-slide !w-2/3">
    <Picture
      src={myImage4}
      alt="004"
      width={1024}
      height={1024}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
      loading="eager"
      class="object-cover h-full rounded-2xl w-full"
    />
  </div>

  <div class="swiper-slide !w-2/3">
    <Picture
      src={myImage5}
      alt="005"
      width={1024}
      height={1024}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
      loading="eager"
      class="object-cover h-full rounded-2xl w-full"
    />
  </div>

  <div class="swiper-slide !w-2/3">
    <Picture
      src={myImage6}
      alt="006"
      width={1024}
      height={1024}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
      loading="eager"
      class="object-cover h-full rounded-2xl w-full"
    />
  </div>
</Swiper>