# Swiper Usage Guide - Optimized for Tree-Shaking

## Overview

Swiper is installed and ready to use. To avoid bundling unused CSS and JS, **import only what you need** in each component.

## Best Practices

### ✅ DO: Import Only What You Need

```vue
<script setup lang="ts">
// Import Swiper components
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import ONLY the modules you need
import { Navigation, Pagination } from 'swiper/modules'

// Import CSS only for modules you use
import 'swiper/css' // Base (required)
import 'swiper/css/navigation' // Only if using Navigation
import 'swiper/css/pagination' // Only if using Pagination

const modules = [Navigation, Pagination]
</script>

<template>
  <ClientOnly>
    <Swiper :modules="modules" navigation :pagination="{ clickable: true }">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
    </Swiper>
  </ClientOnly>
</template>
```

### ❌ DON'T: Import Everything Globally

```vue
<!-- DON'T DO THIS -->
<script setup>
// This imports ALL Swiper CSS, even if you don't use all modules
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/autoplay'
// ... etc
</script>
```

## Available Modules

Only import the modules you actually use:

- `Navigation` - Navigation arrows
- `Pagination` - Pagination dots
- `Scrollbar` - Scrollbar
- `Autoplay` - Auto-playing slides
- `EffectFade` - Fade effect
- `EffectCube` - Cube effect
- `EffectFlip` - Flip effect
- `EffectCoverflow` - Coverflow effect
- `EffectCreative` - Creative effects
- `EffectCards` - Cards effect
- `Thumbs` - Thumbnails
- `Zoom` - Zoom functionality
- `Lazy` - Lazy loading
- `Controller` - Control multiple swipers
- `A11y` - Accessibility
- `History` - History navigation
- `HashNavigation` - Hash navigation
- `Parallax` - Parallax
- `FreeMode` - Free mode
- `Grid` - Grid layout
- `Manipulation` - Manipulation
- `Virtual` - Virtual slides
- `Keyboard` - Keyboard control
- `Mousewheel` - Mousewheel control

## CSS Imports

Import CSS files that match your modules:

- `swiper/css` - **Always required**
- `swiper/css/navigation` - For Navigation module
- `swiper/css/pagination` - For Pagination module
- `swiper/css/scrollbar` - For Scrollbar module
- `swiper/css/effect-fade` - For EffectFade module
- `swiper/css/effect-cube` - For EffectCube module
- `swiper/css/effect-flip` - For EffectFlip module
- `swiper/css/effect-coverflow` - For EffectCoverflow module
- `swiper/css/effect-creative` - For EffectCreative module
- `swiper/css/effect-cards` - For EffectCards module

## Example Component

See `app/components/examples/SwiperExample.vue` for a complete example.

## Why This Matters

- **Smaller bundle size**: Only code you use is included
- **Faster page loads**: Less CSS/JS to download and parse
- **Better performance**: Less unused code in memory
- **Tree-shaking**: Build tools can remove unused code

## Current Setup

- ✅ Swiper is installed (`swiper@^12.1.2`)
- ✅ No global CSS imports (import in components as needed)
- ✅ Ready for tree-shaking optimization
- ✅ Compatible with Nuxt 4