{"id":30689533,"url":"https://github.com/cssnr/vitepress-swiper","last_synced_at":"2026-01-20T17:35:42.912Z","repository":{"id":311540817,"uuid":"1043950754","full_name":"cssnr/vitepress-swiper","owner":"cssnr","description":"A VitePress Swiper Plugin to Easily add an Image or Photo Gallery with Custom Options.","archived":false,"fork":false,"pushed_at":"2025-08-25T06:22:11.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-25T06:42:35.966Z","etag":null,"topics":["vitepress"],"latest_commit_sha":null,"homepage":"https://cssnr.github.io","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cssnr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"ko_fi":"cssnr"}},"created_at":"2025-08-25T00:35:19.000Z","updated_at":"2025-08-25T06:21:49.000Z","dependencies_parsed_at":"2025-08-25T06:42:42.617Z","dependency_job_id":"2ac1e576-1ec6-45ca-b936-5037848cf83a","html_url":"https://github.com/cssnr/vitepress-swiper","commit_stats":null,"previous_names":["cssnr/vitepress-swiper"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/cssnr/vitepress-swiper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssnr%2Fvitepress-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssnr%2Fvitepress-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssnr%2Fvitepress-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssnr%2Fvitepress-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cssnr","download_url":"https://codeload.github.com/cssnr/vitepress-swiper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssnr%2Fvitepress-swiper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273034316,"owners_count":25034380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vitepress"],"created_at":"2025-09-02T01:39:26.442Z","updated_at":"2026-01-20T17:35:42.901Z","avatar_url":"https://github.com/cssnr.png","language":"Vue","funding_links":["https://ko-fi.com/cssnr"],"categories":[],"sub_categories":[],"readme":"[![NPM Version](https://img.shields.io/npm/v/%40cssnr%2Fvitepress-swiper?logo=npm)](https://www.npmjs.com/package/@cssnr/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 Downloads](https://img.shields.io/npm/dm/%40cssnr%2Fvitepress-swiper?logo=npm)](https://npm-stat.com/charts.html?package=%40cssnr%2Fvitepress-swiper)\n[![Bundlephobia Size](https://img.shields.io/bundlephobia/min/%40cssnr%2Fvitepress-swiper?logo=bookstack\u0026logoColor=white)](https://bundlephobia.com/package/@cssnr/vitepress-swiper)\n[![Deployments NPM](https://img.shields.io/github/deployments/cssnr/vitepress-swiper/npm?logo=npm\u0026label=deploy)](https://github.com/cssnr/vitepress-swiper/deployments/npm)\n[![Deployments Docs](https://img.shields.io/github/deployments/cssnr/vitepress-swiper/docs?logo=vitepress\u0026logoColor=white\u0026label=docs)](https://github.com/cssnr/vitepress-swiper/deployments/docs)\n[![Workflow Release](https://img.shields.io/github/actions/workflow/status/cssnr/vitepress-swiper/release.yaml?logo=cachet\u0026label=release)](https://github.com/cssnr/vitepress-swiper/actions/workflows/release.yaml)\n[![Workflow Lint](https://img.shields.io/github/actions/workflow/status/cssnr/vitepress-swiper/lint.yaml?logo=cachet\u0026label=lint)](https://github.com/cssnr/vitepress-swiper/actions/workflows/lint.yaml)\n[![GitHub Repo Size](https://img.shields.io/github/repo-size/cssnr/vitepress-swiper?logo=bookstack\u0026logoColor=white\u0026label=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\u0026logoColor=white)](https://github.com/cssnr/vitepress-swiper/blob/master/src/VPSwiper.vue)\n[![GitHub Last Commit](https://img.shields.io/github/last-commit/cssnr/vitepress-swiper?logo=github\u0026label=updated)](https://github.com/cssnr/vitepress-swiper/pulse)\n[![GitHub Issues](https://img.shields.io/github/issues/cssnr/vitepress-swiper?logo=github)](https://github.com/cssnr/vitepress-swiper/issues)\n[![GitHub Contributors](https://img.shields.io/github/contributors-anon/cssnr/vitepress-swiper?logo=github)](https://github.com/cssnr/vitepress-swiper/graphs/contributors)\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\u0026logo=github)](https://github.com/cssnr/vitepress-swiper/stargazers)\n[![GitHub Org Stars](https://img.shields.io/github/stars/cssnr?style=flat\u0026logo=github\u0026label=org%20stars)](https://cssnr.github.io/)\n[![Discord](https://img.shields.io/discord/899171661457293343?logo=discord\u0026logoColor=white\u0026label=discord\u0026color=7289da)](https://discord.gg/wXy6m2X8wY)\n[![Ko-fi](https://img.shields.io/badge/Ko--fi-72a5f2?logo=kofi\u0026label=support)](https://ko-fi.com/cssnr)\n\n# VitePress Swiper Plugin\n\n\u003ca title=\"VitePress Swiper Plugin\" href=\"https://vitepress-swiper.cssnr.com/\" target=\"_blank\"\u003e\n\u003cimg alt=\"VitePress Swiper Plugin\" align=\"right\" width=\"128\" height=\"auto\" src=\"https://vitepress-swiper.cssnr.com/images/logo.png\"\u003e\u003c/a\u003e\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\u003e [!IMPORTANT]  \n\u003e For **Up-to-Date** Documentation, please visit the website:  \n\u003e https://vitepress-swiper.cssnr.com/\n\n## Install\n\n- [NPM Package](#NPM-Package) - Easiest, minimal footprint, no source access\n- [From Source](#From-Source) - Adds 1 file to your project, full source access\n\nView the [Installation Guide](https://vitepress-swiper.cssnr.com/guides/get-started#install) for more details.\n\n### NPM Package\n\nNPM Package: https://www.npmjs.com/package/@cssnr/vitepress-swiper\n\nInstall directly into your VitePress with:\n\n```shell\nnpm i @cssnr/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 '@cssnr/vitepress-swiper' // add this line\nimport '@cssnr/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 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 `\u003cVPSwiper\u003e` 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\u003e 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\u003cVPSwiper\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/\u003e\n```\n\nExample using [additional options](#options).\n\n```vue\n\u003cVPSwiper\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/\u003e\n```\n\n\u003e [!TIP]  \n\u003e See Live Demo's, Examples, and Up-to-Date Docs on the website:  \n\u003e 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 `\u003cVPSwiper\u003e` tag options/parameters.\n\n```vue\n\u003cVPSwiper base-url=\"https://example.com/path\" :number-of-slides=\"3\" /\u003e\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\u003cVPSwiper\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/\u003e\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\u003e 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\u0026nbsp;Name      |    Default\u0026nbsp;Value     |  Type   | Description\u0026nbsp;of\u0026nbsp;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| background-color        | `var(--vp-code-block-bg)` | String  | [CSS background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) |\n| border-radius           |           `8px`           | String  | [CSS border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)       |\n\n\u003e **¹** 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\u0026nbsp;Name                                                               |   Default    |  Type   | Description\u0026nbsp;of\u0026nbsp;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\u003e [!TIP]  \n\u003e 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\u0026A 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/@cssnr/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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssnr%2Fvitepress-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcssnr%2Fvitepress-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssnr%2Fvitepress-swiper/lists"}