Nuxt Swiper

[!IMPORTANT]

Nuxt Swiper는 Swiper.js를 기반으로 웹 컴포넌트를 사용합니다. 이 모듈을 사용하기 전에 Swiper.js 문서를 반드시 읽어보시고 Nuxt Swiper와 직접 관련이 없는 문제는 보고하지 마십시오. 근본적인 버그가 있을 경우 Swiper.js 저장소에 이슈를 제출해 주세요.

[!NOTE]

Vue.js에서 웹 컴포넌트를 사용하는 방법을 배우고 싶다면 다음 문서를 참고하세요: Vue.js 웹 컴포넌트

기능

• 📖 오픈 소스
• 🪄 TypeScript 지원
• ✅ 자동 임포트 활성화
• ✨ 마법처럼 바로 작동

설정

온라인에서 사용해보기

1단계: 모듈 설치하기

npx nuxi@latest module add swiper

사용법

[!참고]

이들은 웹 컴포넌트이기 때문에 Vue에서 사용하는 camelCase 명명법 대신 kebab-case 명명법을 사용합니다.

| Swiper 컴포넌트 (웹컴포넌트) | | ----------------------------- | | | | |

모듈 옵션

interface ModuleOptions {
  /
   
Enable custom Swiper composables to help you access Swiper instance.
   
@example ``vue

   

   
*
   

   
`

   
@default true
   
*/
  enableComposables?: boolean
  /
   
Bundle Swiper custom elements.
   
if disabled, you need to import swiper css and modules manually.
   
@see https://swiperjs.com/element#core-version--modules
   
@default true
   
*/
  bundled?: boolean
}

기본 사용법

고급 사용법

크레딧

Swiper.js는 @nolimits4web에 의해 개발되었습니다.

Nuxt Swiper`는 @cpreston321에 의해 개발되었습니다.

📧 연락처

X (이전 이름: 트위터) - @christian_ggg

또한, 제 작업이 마음에 드신다면, 커피 한 잔 사주기를 통해 응원해 주세요 ☕️

기여자

MIT 라이선스 © 2025 CP

--- Tranlated By Open Ai Tx | Last indexed: 2025-12-15 ---