VitePress Swiper

Appearance

Getting Started ​

A VitePress Plugin to Easily add a SwiperJS Photo Gallery or Image Slideshow.

Start by installing the package, setting up the plugin, and using the component.

Install ​

Install or Download from NPM npmjs.com

Install directly to your VitePress with the following command.

shell
npm i @davidingplus/vitepress-swiper
shell
pnpm i @davidingplus/vitepress-swiper
shell
yarn add @davidingplus/vitepress-swiper
shell
bun i @davidingplus/vitepress-swiper

Note: you can also copy the source file to your project.

Setup ​

Add these 3 lines to your index.[js,ts].

If you don't have a .vitepress/theme/index.js file, create one.

.vitepress/theme/index.js
javascript
import DefaultTheme, { VPBadge } from 'vitepress/theme'

import VPSwiper from '@davidingplus/vitepress-swiper'
import '@davidingplus/vitepress-swiper/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) 
    app.component('VPSwiper', VPSwiper) 
  },
}
VPBadge Only required if you are using the VitePress Badge.

Usage ​

Add a <VPSwiper> tag to your Markdown where you want the Swiper to appear.

vue
<VPSwiper
  :slides="[
    'https://example.com/path/1.jpg',
    'https://example.com/path/2.jpg',
    'https://example.com/path/3.jpg',
  ]"
/>
vue
<VPSwiper
  :slides="[
    'https://example.com/path/1.jpg',
    'https://example.com/path/2.jpg',
    'https://example.com/path/3.jpg',
  ]"
  :pagination="{ type: 'fraction' }"
  :mousewheel="false"
  button-text="Fullscreen"
  margin-top="30px"
  effect="coverflow"
  :coverflow-effect="{ slideShadows: false }"
/>
vue
<VPSwiper base-url="https://example.com/path" :number-of-slides="3" />

Make sure to check out the Additional Options.

Note: HTML tags must be seperated from Markdown with one blank line.

🖼️ LIVE DEMOS

You can view more on the Examples page.

Dynamic URLs ​

You can generate URL's dynamically using numbers to reduce boilerplate.

See the Dynamic URL's Page for more details.

 

❔ GET HELP

If you have any trouble getting started, support is available.