{"_id":"@davidingplus/vitepress-swiper","name":"@davidingplus/vitepress-swiper","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.1":{"name":"@davidingplus/vitepress-swiper","version":"0.2.1","publishConfig":{"access":"public"},"type":"module","license":"GPL-3.0-only","description":"A VitePress Plugin to Easily add a SwiperJS Photo Gallery or Image Slideshow with Custom Options.","homepage":"https://vitepress-swiper.cssnr.com","repository":{"type":"git","url":"git+https://github.com/cssnr/vitepress-swiper.git"},"bugs":{"url":"https://github.com/cssnr/vitepress-swiper/issues"},"funding":{"type":"ko-fi","url":"https://ko-fi.com/cssnr"},"keywords":["vitepress-plugin","vitepress","plugin","swiper","swiperjs","image","gallery","photo","slideshow"],"main":"dist/VPSwiper.umd.js","module":"dist/VPSwiper.es.js","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/VPSwiper.es.js","require":"./dist/VPSwiper.umd.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist/types","get-contributors":"npx get-contributors cssnr/vitepress-swiper -f docs/.vitepress/contributors.json","prettier":"npx prettier --check .","test":"jest"},"peerDependencies":{"swiper":">=11.0.0","vitepress":"*","vue":"^3.0.0"},"devDependencies":{"@cssnr/vitepress-plugin-contributors":"^0.0.3","@cssnr/vitepress-plugin-copybutton":"^0.0.2","@vitejs/plugin-vue":"^6.0.1","jest":"^30.1.3","prettier":"^3.6.2","vite":"^7.1.5","vite-plugin-dts":"^4.5.4","vitepress":"^2.0.0-alpha.6","vitepress-plugin-group-icons":"^1.6.3","vue":"^3.5.21","vue-tsc":"^3.0.7"},"_id":"@davidingplus/vitepress-swiper@0.2.1","gitHead":"3fda29a1de08c4e4bcf8f49ca338fee1a7930472","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-awYo+VkLX8BvL91I5a0jDfqoX+7z8xi4AL87C6H+rvUSNtiGeTvkkTxMR58rZp4Px8PraJB5glon35iuM4iKLA==","shasum":"e989978b2099e7a257174b7239ba053854e75965","tarball":"https://registry.npmjs.org/@davidingplus/vitepress-swiper/-/vitepress-swiper-0.2.1.tgz","fileCount":8,"unpackedSize":96046,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEpknHmzZfFQnRqkTINwx7bo08jrV7SZ0+Bi2yHJJnQVAiBDe/dJb8Ya0d3ltic9n7lU+mjRgaHutG5CVpVCVDrO2w=="}]},"_npmUser":{"name":"lzx0626","email":"davidingplus@qq.com"},"directories":{},"maintainers":[{"name":"lzx0626","email":"davidingplus@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vitepress-swiper_0.2.1_1758379268221_0.11512901528731612"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-20T14:41:08.081Z","0.2.1":"2025-09-20T14:41:08.412Z","modified":"2025-09-20T14:41:08.830Z"},"maintainers":[{"name":"lzx0626","email":"davidingplus@qq.com"}],"description":"A VitePress Plugin to Easily add a SwiperJS Photo Gallery or Image Slideshow with Custom Options.","homepage":"https://vitepress-swiper.cssnr.com","keywords":["vitepress-plugin","vitepress","plugin","swiper","swiperjs","image","gallery","photo","slideshow"],"repository":{"type":"git","url":"git+https://github.com/cssnr/vitepress-swiper.git"},"bugs":{"url":"https://github.com/cssnr/vitepress-swiper/issues"},"license":"GPL-3.0-only","readme":"[![NPM Downloads](https://img.shields.io/npm/dw/%40cssnr%2Fvitepress-swiper?logo=npm)](https://www.npmjs.com/package/@davidingplus/vitepress-swiper)\n[![NPM Version](https://img.shields.io/npm/v/%40cssnr%2Fvitepress-swiper?logo=npm)](https://www.npmjs.com/package/@davidingplus/vitepress-swiper)\n[![GitHub Release Version](https://img.shields.io/github/v/release/cssnr/vitepress-swiper?logo=github)](https://github.com/cssnr/vitepress-swiper/releases)\n[![NPM Bundle Size](https://img.shields.io/bundlephobia/min/%40cssnr%2Fvitepress-swiper?logo=npm)](https://bundlephobia.com/package/@davidingplus/vitepress-swiper)\n[![Deployments NPM](https://img.shields.io/github/deployments/cssnr/vitepress-swiper/npm?logo=github&label=release)](https://github.com/cssnr/vitepress-swiper/deployments/npm)\n[![Deployments Pages](https://img.shields.io/github/deployments/cssnr/vitepress-swiper/docs?logo=github&label=docs)](https://github.com/cssnr/vitepress-swiper/deployments/docs)\n[![WF Release](https://img.shields.io/github/actions/workflow/status/cssnr/vitepress-swiper/release.yaml?logo=cachet&label=release)](https://github.com/cssnr/vitepress-swiper/actions/workflows/release.yaml)\n[![WF Lint](https://img.shields.io/github/actions/workflow/status/cssnr/vitepress-swiper/lint.yaml?logo=cachet&label=lint)](https://github.com/cssnr/vitepress-swiper/actions/workflows/lint.yaml)\n[![GitHub Contributors](https://img.shields.io/github/contributors/cssnr/vitepress-swiper?logo=github)](https://github.com/cssnr/vitepress-swiper/graphs/contributors)\n[![GitHub Last Commit](https://img.shields.io/github/last-commit/cssnr/vitepress-swiper?logo=github)](https://github.com/cssnr/vitepress-swiper/pulse)\n[![GitHub Repo Size](https://img.shields.io/github/repo-size/cssnr/vitepress-swiper?logo=bookstack&logoColor=white&label=repo%20size)](https://github.com/cssnr/vitepress-swiper?tab=readme-ov-file#readme)\n[![GitHub Top Language](https://img.shields.io/github/languages/top/cssnr/vitepress-swiper?logo=htmx&logoColor=white)](https://github.com/cssnr/vitepress-swiper/blob/master/src/VPSwiper.vue)\n[![GitHub Discussions](https://img.shields.io/github/discussions/cssnr/vitepress-swiper?logo=github)](https://github.com/cssnr/vitepress-swiper/discussions)\n[![GitHub Repo Stars](https://img.shields.io/github/stars/cssnr/vitepress-swiper?style=flat&logo=github)](https://github.com/cssnr/vitepress-swiper/stargazers)\n[![GitHub Org Stars](https://img.shields.io/github/stars/cssnr?style=flat&logo=github&label=org%20stars)](https://cssnr.github.io/)\n[![Discord](https://img.shields.io/discord/899171661457293343?logo=discord&logoColor=white&label=discord&color=7289da)](https://discord.gg/wXy6m2X8wY)\n[![Ko-fi](https://img.shields.io/badge/Ko--fi-72a5f2?logo=kofi&label=support)](https://ko-fi.com/cssnr)\n\n# VitePress Swiper Plugin\n\n- [Install](#Install)\n- [Usage](#Usage)\n- [Options](#Options)\n- [Support](#Support)\n\nA [VitePress](https://vitepress.dev/) Plugin to Easily add a [SwiperJS](https://swiperjs.com/) Photo Gallery or Image Slideshow with Custom [Options](#Options).\n\nEasy to [install](#Install) and [use](#Usage) with lots of custom [options](#Options).\nProvide a [list](#Usage) of slide URL's or [dynamically generate](#dynamic-url-generation) them.\n\nMinimal footprint with only 3 lines of setup code and 1 Markdown tag per gallery.\n\n**Live Demo's and Examples** are [available on the website](https://vitepress-swiper.cssnr.com/examples).\n\n> [!IMPORTANT]  \n> For **Up-to-Date** Documentation, please visit the website:  \n> https://vitepress-swiper.cssnr.com/\n\n## Install\n\nThere are 2 ways to install this plugin based on preference.\n\n1. [As a Dependency](#as-a-dependency) - Easiest, minimal footprint, no source access\n2. [From the Source](#from-the-source) - Adds 1 file to your project, full source access\n\n> View the [Installation Guide](https://vitepress-swiper.cssnr.com/guides/get-started#install).\n\n### As a Dependency\n\nNPM Package: https://www.npmjs.com/package/@davidingplus/vitepress-swiper\n\nInstall directly into your VitePress with:\n\n```shell\nnpm i @davidingplus/vitepress-swiper\n```\n\nThen import it in your `.vitepress/theme/index.js`:\n\n```javascript\nimport DefaultTheme from 'vitepress/theme'\n\nimport VPSwiper from '@davidingplus/vitepress-swiper' // add this line\nimport '@davidingplus/vitepress-swiper/style.css' // add this line\n\nexport default {\n  ...DefaultTheme,\n  enhanceApp({ app }) {\n    app.component('VPSwiper', VPSwiper) // add this line\n  },\n}\n```\n\n_Note: If you use the [VitePress Badge](https://vitepress.dev/reference/default-theme-badge#badge)\nsee the [Setup Guide](https://vitepress-swiper.cssnr.com/guides/get-started#setup) for more information._\n\nProceed to [Usage](#Usage).\n\n### From the Source\n\nAdd to your project:\n\n1. Download or clone the [src/VPSwiper.vue](src/VPSwiper.vue) file to your project.\n2. Place it to the following location: `.vitepress/theme/components/VPSwiper.vue`\n3. Install the dependencies, `swiper`.\n\n```shell\nnpm i swiper\n```\n\nThen import it in your `.vitepress/theme/index.js`:\n\n```javascript\nimport DefaultTheme from 'vitepress/theme'\n\nimport VPSwiper from './components/VPSwiper.vue' // add this line\n\nexport default {\n  ...DefaultTheme,\n  enhanceApp({ app }) {\n    app.component('VPSwiper', VPSwiper) // add this line\n  },\n}\n```\n\n## Usage\n\nTo use, add a `<VPSwiper>` tag to your markdown where you want the gallery to appear.\n\nYou can provide a [list](#slides-list) of `:slides` or generate\na [dynamic](#dynamic-url-generation) `:number-of-slides` using a `base-url`.\n\n> View the [Usage Guide](https://vitepress-swiper.cssnr.com/guides/get-started#usage).\n\n### Slides List\n\nTo generate from a list of `:slides` add them in this format.\n\n```vue\n<VPSwiper\n  :slides=\"[\n    'https://example.com/path/1.jpg',\n    'https://example.com/path/2.jpg',\n    'https://example.com/path/3.jpg',\n  ]\"\n/>\n```\n\nExample using [additional options](#options).\n\n```vue\n<VPSwiper\n  :slides=\"[\n    'https://example.com/path/1.jpg',\n    'https://example.com/path/2.jpg',\n    'https://example.com/path/3.jpg',\n  ]\"\n  :pagination=\"{ type: 'fraction' }\"\n  :mousewheel=\"false\"\n  button-text=\"Fullscreen\"\n  margin-top=\"30px\"\n  effect=\"coverflow\"\n  :coverflow-effect=\"{ slideShadows: false }\"\n/>\n```\n\n> [!TIP]  \n> See Live Demo's, Examples, and Up-to-Date Docs on the website:  \n> https://vitepress-swiper.cssnr.com/\n\n### Dynamic URL Generation\n\nThis only works if your files are named numerically and ordered sequentially.\n\nThis generates numbers for filenames and appends them to the base url as follows:\n\n- `base-url` + `/` + `file-name-prefix` + `file#` + `file-ext`\n\nTherefore, the following `<VPSwiper>` tag options/parameters.\n\n```vue\n<VPSwiper base-url=\"https://example.com/path\" :number-of-slides=\"3\" />\n```\n\nWill produce these URL's:\n\n```text\nhttps://example.com/path/1.jpg\nhttps://example.com/path/2.jpg\nhttps://example.com/path/3.jpg\n```\n\nExample using [additional options](#options).\n\n```vue\n<VPSwiper\n  base-url=\"https://example.com/path\"\n  :number-of-slides=\"4\"\n  :start-at=\"8\"\n  :pad-start=\"2\"\n  file-name-prefix=\"slide-\"\n  file-ext=\".png\"\n  :pagination=\"{ clickable: true }\"\n  :grab-cursor=\"false\"\n  margin-top=\"40px\"\n  effect=\"fade\"\n/>\n```\n\nResulting URL's:\n\n```text\nhttps://example.com/path/slide-08.png\nhttps://example.com/path/slide-09.png\nhttps://example.com/path/slide-10.png\nhttps://example.com/path/slide-11.png\n```\n\n## Options\n\nThere are [Plugin Options](#plugin-options) and [Swiper Options](#swiper-options).\n\n_Note: String parameters do **not** begin with a `:` but all other types do._\n\n> View the [Options Guide](https://vitepress-swiper.cssnr.com/docs/options).\n\n### Plugin Options\n\nYou must provide `:slides` or a `base-url` but **not both**.\n\n| Property&nbsp;Name      |  Default&nbsp;Value  |  Type   | Description&nbsp;of&nbsp;Value                                                        |\n| :---------------------- | :------------------: | :-----: | :------------------------------------------------------------------------------------ |\n| **:slides**             |   or **base-url**    |  Array  | Base URL for image sources                                                            |\n| **base-url** **¹**      |    or **:slides**    | String  | Base URL for image sources                                                            |\n| :number-of-slides **¹** |         `1`          | Number  | Number of slides to generate                                                          |\n| :start-at **¹**         |         `1`          | Number  | Number to start generation                                                            |\n| file-ext **¹**          |        `.jpg`        | String  | Extension for file names                                                              |\n| :pad-start **¹**        |         `1`          | Number  | Pad file names with `0`'s                                                             |\n| file-name-prefix **¹**  |         ` `          | String  | Prefix for file names                                                                 |\n| alt-text-prefix         |      `Loading`       | String  | Prefix for `alt` attributes                                                           |\n| button-text             | `View in Fullscreen` | String  | Text for fullscreen button                                                            |\n| no-fullscreen           |       `false`        | Boolean | Disable fullscreen button                                                             |\n| height                  |        `null`        | String  | [CSS height](https://developer.mozilla.org/en-US/docs/Web/CSS/height) (default: auto) |\n| margin                  |        `null`        | String  | [CSS margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)                 |\n| border-radius           |        `8px`         | String  | [CSS border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)   |\n\n> **¹** Only used with [Dynamic URL's](#dynamic-url-generation)\n\n### Swiper Options\n\nSwiper Parameters: https://swiperjs.com/swiper-api#parameters\n\n| Property&nbsp;Name                                                               |   Default    |  Type   | Description&nbsp;of&nbsp;Value      |\n| :------------------------------------------------------------------------------- | :----------: | :-----: | :---------------------------------- |\n| [:slides-per-view](https://swiperjs.com/swiper-api#param-slidesPerView)          |     `1`      | Number  | Number of slides shown per view     |\n| [:space-between](https://swiperjs.com/swiper-api#param-spaceBetween)             |     `0`      | Number  | Space between slides in pixels      |\n| [:lazy-preload-prev-next](https://swiperjs.com/swiper-api#param-spaceBetween)    |     `1`      | Number  | Number of lazy loaded slides        |\n| [:breakpoints](https://swiperjs.com/swiper-api#param-breakpoints)                |    `null`    | Object  | Breakpoints parameters              |\n| [:pagination](https://swiperjs.com/swiper-api#pagination-parameters)             |    `true`    | Object  | Pagination parameters               |\n| [:keyboard](https://swiperjs.com/swiper-api#param-keyboard)                      |    `true`    | Boolean | Enable keyboard navigation          |\n| [:mousewheel](https://swiperjs.com/swiper-api#param-mousewheel)                  |    `true`    | Boolean | Enable mouse wheel navigation       |\n| [:navigation](https://swiperjs.com/swiper-api#param-navigation)                  |    `true`    | Boolean | Enable side navigation arrows       |\n| [:grab-cursor](https://swiperjs.com/swiper-api#param-grabCursor)                 |    `true`    | Boolean | Enable grab cursor on hover         |\n| [:loop](https://swiperjs.com/swiper-api#param-loop)                              |    `true`    | Boolean | Enable continuous loop              |\n| [:autoplay](https://swiperjs.com/swiper-api#param-autoplay)                      |   `false`    | Object  | Can be `true` or parameters         |\n| [:centered-slides](https://swiperjs.com/swiper-api#param-centeredSlides)         |   `false`    | Boolean | Center slides vs left aligned       |\n| [:direction](https://swiperjs.com/swiper-api#param-direction)                    | `horizontal` | String  | If `vertical` must set `height`     |\n| [:initial-slide](https://swiperjs.com/swiper-api#param-initialSlide)             |     `0`      | Number  | Initial slide index                 |\n| [:one-way-movement](https://swiperjs.com/swiper-api#param-oneWayMovement)        |   `false`    | Boolean | Only allow swiping forward          |\n| [:speed](https://swiperjs.com/swiper-api#param-speed)                            |    `300`     | Number  | Slide transition speed in ms        |\n| [effect](https://swiperjs.com/swiper-api#param-effect)                           |   `slide`    | String  | `coverflow`, `cube`, `fade`, `flip` |\n| [:coverflow-effect](https://swiperjs.com/swiper-api#coverflow-effect-parameters) |    `{ }`     | Object  | EffectCoverflow parameters          |\n| [:cube-effect](https://swiperjs.com/swiper-api#cube-effect-parameters)           |    `{ }`     | Object  | EffectCube parameters               |\n| [:fade-effect](https://swiperjs.com/swiper-api#fade-effect-parameters)           |    `{ }`     | Object  | EffectFade parameters               |\n| [:flip-effect](https://swiperjs.com/swiper-api#flip-effect-parameters)           |    `{ }`     | Object  | EffectFlip parameters               |\n\n> [!TIP]  \n> If you need more options, please start a [feature request discussion](https://github.com/cssnr/vitepress-swiper/discussions/categories/feature-requests).\n\n## Support\n\nPlease let us know if you run into any [issues](https://github.com/cssnr/vitepress-swiper/issues)\nor want to see [new features](https://github.com/cssnr/vitepress-swiper/discussions/categories/feature-requests)...\n\nFor general help or to request a feature:\n\n- Q&A Discussion: https://github.com/cssnr/vitepress-swiper/discussions/categories/q-a\n- Request a Feature: https://github.com/cssnr/vitepress-swiper/discussions/categories/feature-requests\n\nIf you are experiencing an issue/bug or getting unexpected results:\n\n- Report an Issue: https://github.com/cssnr/vitepress-swiper/issues\n- Chat with us on Discord: https://discord.gg/wXy6m2X8wY\n- Provide General Feedback: [https://cssnr.github.io/feedback/](https://cssnr.github.io/feedback/?app=VitePress%20Swiper)\n\n### More VitePress Plugins\n\n- [SwiperJS](https://github.com/cssnr/vitepress-swiper) - Photo Gallery\n- [Contributors](https://github.com/cssnr/vitepress-plugin-contributors) - GitHub Contributors\n- [Copy Button](https://github.com/cssnr/vitepress-plugin-copybutton) - Copy Text Button\n\n# Contributing\n\nAll contributions are welcome including [bug reports](https://github.com/cssnr/vitepress-swiper/issues), [feature requests](https://github.com/cssnr/vitepress-swiper/discussions/categories/feature-requests), or pull requests.\n\nFor instructions on creating a PR for the [Package](https://www.npmjs.com/package/@davidingplus/vitepress-swiper) or [Documentation](https://vitepress-swiper.cssnr.com/),\nsee the [CONTRIBUTING.md](#contributing-ov-file).\n\nPlease consider making a donation to support the development of this project and additional open source projects.\n\n[![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/cssnr)\n\nFor a full list of current projects visit: [https://cssnr.github.io/](https://cssnr.github.io/)\n","readmeFilename":"README.md","_rev":"1-7aeb48776e0e1b1568bed9736a7c9efb"}