diff --git a/.node-version b/.node-version index 3c03207..209e3ef 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -18 +20 diff --git a/README.md b/README.md index 8170021..6b6d555 100644 --- a/README.md +++ b/README.md @@ -58,16 +58,32 @@ export default defineNuxtConfig({ export interface ModuleOptions { /** * Enable custom Swiper composables to help you access Swiper instance. - * @example ```ts - * // 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 } ``` @@ -122,25 +138,75 @@ swiper-slide { ``` -## 💻 Development +## Advanced Usage -```sh -# Install dependencies -pnpm install - -# Generate type stubs -pnpm run dev:prepare +```vue + -# Build the playground -pnpm run dev:build + -# Run ESLint -pnpm run lint + ``` +## 💻 Development + +
+ Local development + +- Clone this repository +- Install the latest LTS version of [Node.js](https://nodejs.org/en/) +- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` +- Install dependencies using `pnpm install` +- Generate type stubs using `pnpm dev:prepare` +- Run tests using `pnpm dev` + +
+ ## Credits [`Swiper.js`](https://swiperjs.com/) is developed by [@nolimits4web](https://github.com/nolimits4web). diff --git a/examples/swiper-basic/app.vue b/examples/swiper-basic/app.vue index 39de732..c528530 100644 --- a/examples/swiper-basic/app.vue +++ b/examples/swiper-basic/app.vue @@ -21,6 +21,28 @@ const slides = ref( const swiperBasicRef = ref(null) const swiperCreativeRef = ref(null) const swiper1 = useSwiper(swiperBasicRef) + +/** + * Pass in options to the useSwiper hook to customize the swiper instance + * then automatically bind the swiper instance to the ref + */ +useSwiper(swiperCreativeRef, { + effect: 'creative', + autoplay: { + delay: 8000, + disableOnInteraction: true, + }, + creativeEffect: { + prev: { + translate: ['-125%', 0, -800], + rotate: [0, 0, -90], + }, + next: { + translate: ['125%', 0, -800], + rotate: [0, 0, 90], + }, + }, +})