Swiper
Overview
Use the <Swiper> component to display image carousels on pages.
Usage
To use this component, first manually install the swiper library:
npm install swiperpnpm add swiperyarn add swiperThe component can be used directly in any markdown file (the theme will automatically import the Swiper component on demand).
<Swiper :items="['img_link1', 'img_link2']" />Example:
Props
Image link array. When passing objects, link represents the image URL, href the navigation link, and alt the image description
Carousel area width
Carousel area height
Carousel mode: banner banner, carousel carousel, broadcast information display
Carousel effect
Carousel interval. Only effective when mode: 'banner'
Animation duration
Whether to loop
Whether to pause the carousel on mouse hover
Whether to enable gesture swiping
For more props, refer to Swiper Documentation
Slots
This component provides no named slots. Slides are passed through the items prop. Each item is either an image URL or an object with link, href and alt:
<Swiper :items="[
'/images/slide-1.png',
{ link: '/images/slide-2.png', href: 'https://example.com', alt: 'Click to visit' },
]"
/>Tips
link is the image address, while href is the click target. The two mean different things and are easy to confuse.
Examples
The images in the examples below come from this page's script setup
All reference examples on this page use :items="images", where images is defined in the <script setup> at the top of this page (used to fetch wallpaper data from the example site) — it is not a built-in variable of the component.
When copying these examples directly into your own page, you need to provide equivalent data yourself:
<script setup lang="ts">
const images = [
{ link: '/images/slide-1.png' },
{ link: '/images/slide-2.png' },
]
</script>Preset Animation Effects
cube:
View Code
<Swiper :items="images" effect="cube" />fade:
View Code
<Swiper :items="images" effect="fade" />coverflow:
View Code
<Swiper :items="images" effect="coverflow" />flip:
View Code
<Swiper :items="images" effect="flip" />cards:
View Code
<Swiper :items="images" effect="cards" />Custom Animation Effects
Example 1:
View Code
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, translate: [0, 0, -400] },
next: { translate: ['100%', 0, 0] },
}"
/>Example 2:
View Code
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, translate: [0, 0, -800], rotate: [180, 0, 0] },
next: { shadow: true, translate: [0, 0, -800], rotate: [-180, 0, 0] },
}"
/>Example 3:
View Code
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, translate: ['-125%', 0, -800], rotate: [0, 0, -90] },
next: { shadow: true, translate: ['125%', 0, -800], rotate: [0, 0, 90] },
}"
/>Example 4:
View Code
<Swiper :items="images" effect="creative" :creativeEffect="{
prev: { shadow: true, origin: 'left center', translate: ['-5%', 0, -200], rotate: [0, 100, 0] },
next: { origin: 'right center', translate: ['5%', 0, -200], rotate: [0, -100, 0] },
}"
/>Carousel
View Code
<Swiper
:items="images"
mode="carousel"
:height="200"
:slides-per-view="3"
:space-between="20"
:speed="5500"
/>Information Display
View Code
<Swiper
:items="images"
mode="broadcast"
:height="200"
:slides-per-view="3"
:space-between="20"
mousewheel
/>