VitePress Swiper

Appearance

Dynamic URL Generation ​

This can greatly help reduce boilerplate and footprint when creating Swipers.

IMPORTANT

This only works if your files are named numerically and ordered sequentially.

This generates numbers for filenames and appends them to the base url as follows:

base-url + / + file-name-prefix + file# + file-ext

Basic ​

Markdown
vue
<VPSwiper base-url="https://example.com/path" :number-of-slides="3" />

Resulting URL's:

text
https://example.com/path/1.jpg
https://example.com/path/2.jpg
https://example.com/path/3.jpg

Additional Options ​

Markdown
vue
<VPSwiper
  base-url="https://example.com/path"
  :number-of-slides="4"
  :start-at="8"
  :pad-start="2"
  file-name-prefix="slide-"
  file-ext=".png"
  :pagination="{ clickable: true }"
  :grab-cursor="false"
  margin-top="40px"
  effect="fade"
/>

Resulting URL's:

text
https://example.com/path/slide-08.png
https://example.com/path/slide-09.png
https://example.com/path/slide-10.png
https://example.com/path/slide-11.png

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.