VitePress Swiper

Appearance

Getting Started ​

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

Start by installing the plugin, getting setup and using the gallery.

Install ​

Install directly to your VitePress with the following command.

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

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

Setup ​

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

.vitepress/theme/index.js
javascript
import DefaultTheme from 'vitepress/theme'

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

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('VPSwiper', VPSwiper) 
  },
}

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

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 }"
/>

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.