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.