Swiper | Sard

介绍

滑动切换视图容器，可运用于banner轮播图等场景。

代码演示

基础使用

通过 Swiper 和 SwiperItem 组件构建轮播，使用 show-indicator 显示指示点，通过 change 事件监听切换。

vue tsvue js

vue

<template>
  <s-swiper show-indicator @change="onChange">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: 'var(--s-color-danger)', text: '1' },
  { color: 'var(--s-color-success)', text: '2' },
  { color: 'var(--s-color-primary)', text: '3' },
])

const onChange = (index: number) => {
  console.log('change', index)
}
</script>

vue

<template>
  <s-swiper show-indicator @change="onChange">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
  },
])
const onChange = (index) => {
  console.log('change', index)
}
</script>

纵向滚动

使用 vertical 将滑动方向切换为纵向。

vue tsvue js

vue

<template>
  <s-swiper vertical show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: 'var(--s-color-danger)', text: '1' },
  { color: 'var(--s-color-success)', text: '2' },
  { color: 'var(--s-color-primary)', text: '3' },
])
</script>

vue

<template>
  <s-swiper vertical show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
  },
])
</script>

循环滑动

使用 loop 开启循环滑动，可在首尾之间无缝切换。

vue tsvue js

vue

<template>
  <s-swiper show-indicator loop :space-between="20">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: 'var(--s-color-danger)', text: '1' },
  { color: 'var(--s-color-success)', text: '2' },
  { color: 'var(--s-color-primary)', text: '3' },
])
</script>

vue

<template>
  <s-swiper show-indicator loop :space-between="20">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
  },
])
</script>

自动播放

使用 autoplay 开启自动播放，通过 delay 设置间隔时间（毫秒）。

vue tsvue js

vue

<template>
  <s-swiper autoplay show-indicator :delay="3000" loop :space-between="20">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: 'var(--s-color-danger)', text: '1' },
  { color: 'var(--s-color-success)', text: '2' },
  { color: 'var(--s-color-primary)', text: '3' },
])
</script>

vue

<template>
  <s-swiper autoplay show-indicator :delay="3000" loop :space-between="20">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
  },
])
</script>

自定义指示器

通过 v-model 绑定当前下标，可以自定义指示器的样式和位置。

vue tsvue js

vue

<template>
  <div class="relative">
    <s-swiper v-model="current">
      <s-swiper-item v-for="(item, index) in list" :key="index">
        <div
          class="flex justify-center items-center text-white w-full h-full text-2xl"
          :style="{ background: item.color }"
        >
          {{ item.text }}
        </div>
      </s-swiper-item>
    </s-swiper>
    <div
      class="absolute right-3 bottom-3 flex justify-center items-center w-8 h-5 rounded-full bg-black/25 text-xs text-white"
    >
      {{ current + 1 }}/{{ list.length }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: 'var(--s-color-danger)', text: '1' },
  { color: 'var(--s-color-success)', text: '2' },
  { color: 'var(--s-color-primary)', text: '3' },
])

const current = ref(0)
</script>

vue

<template>
  <div class="relative">
    <s-swiper v-model="current">
      <s-swiper-item v-for="(item, index) in list" :key="index">
        <div
          class="flex justify-center items-center text-white w-full h-full text-2xl"
          :style="{ background: item.color }"
        >
          {{ item.text }}
        </div>
      </s-swiper-item>
    </s-swiper>
    <div
      class="absolute right-3 bottom-3 flex justify-center items-center w-8 h-5 rounded-full bg-black/25 text-xs text-white"
    >
      {{ current + 1 }}/{{ list.length }}
    </div>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
  },
])
const current = ref(0)
</script>

展示标题

在滑块内叠加标题文本，可随轮播切换展示不同标题。

vue tsvue js

vue

<template>
  <div class="relative">
    <s-swiper v-model="current">
      <s-swiper-item v-for="(item, index) in list" :key="index">
        <div
          class="flex justify-center items-center text-white w-full h-full"
          :style="{ background: item.color }"
        >
          {{ item.text }}

          <div
            class="absolute bottom-0 inset-x-0 px-2 py-1.5 text-white truncate text-sm bg-black/25"
          >
            {{ item.title }}
          </div>
        </div>
      </s-swiper-item>
    </s-swiper>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
    title: '老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
    title: '为报倾城随太守，亲射虎，看孙郎。',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
    title: '酒酣胸胆尚开张。鬓微霜，又何妨！持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。',
  },
])
</script>

vue

<template>
  <div class="relative">
    <s-swiper v-model="current">
      <s-swiper-item v-for="(item, index) in list" :key="index">
        <div
          class="flex justify-center items-center text-white w-full h-full"
          :style="{ background: item.color }"
        >
          {{ item.text }}

          <div
            class="absolute bottom-0 inset-x-0 px-2 py-1.5 text-white truncate text-sm bg-black/25"
          >
            {{ item.title }}
          </div>
        </div>
      </s-swiper-item>
    </s-swiper>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue'
const current = ref(0)
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '1',
    title: '老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。',
  },
  {
    color: 'var(--s-color-success)',
    text: '2',
    title: '为报倾城随太守，亲射虎，看孙郎。',
  },
  {
    color: 'var(--s-color-primary)',
    text: '3',
    title: '酒酣胸胆尚开张。鬓微霜，又何妨！持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。',
  },
])
</script>

嵌入视频

在滑块中嵌入视频，通过监听 v-model 控制视频的播放与暂停。

vue tsvue js

vue

<template>
  <s-swiper v-model="current" show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <img
        v-if="item.image"
        :src="item.image"
        draggable="false"
        class="w-full h-full object-cover"
      />
      <video-slide
        v-else-if="item.video"
        :url="item.video"
        :poster="item.video"
        :active="current === index"
      />
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VideoSlide from './VideoSlide.vue'

const list = ref([
  {
    image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
  },
  {
    video: 'https://fastly.jsdelivr.net/npm/@sard/assets/video/video1.mp4',
    poster: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg',
  },
  {
    image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg',
  },
])

const current = ref(0)
</script>

vue

<template>
  <s-swiper v-model="current" show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <img
        v-if="item.image"
        :src="item.image"
        draggable="false"
        class="w-full h-full object-cover"
      />
      <video-slide
        v-else-if="item.video"
        :url="item.video"
        :poster="item.video"
        :active="current === index"
      />
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
import VideoSlide from './VideoSlide.vue'
const list = ref([
  { image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg' },
  {
    video: 'https://fastly.jsdelivr.net/npm/@sard/assets/video/video1.mp4',
    poster: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic2.jpg',
  },
  { image: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic3.jpg' },
])
const current = ref(0)
</script>

VideoSlide.vue

vue tsvue js

vue

<template>
  <video ref="video" :src="url" :poster="poster" class="w-full h-full bg-black" controls></video>
</template>

<script setup lang="ts">
import { useTemplateRef, watch } from 'vue'

const props = defineProps<{
  url: string
  poster: string
  active: boolean
}>()

const videoRef = useTemplateRef('video')

watch(
  () => props.active,
  (active) => {
    if (active) {
      videoRef.value?.play()
    } else {
      videoRef.value?.pause()
    }
  },
)
</script>

vue

<template>
  <video ref="video" :src="url" :poster="poster" class="w-full h-full bg-black" controls></video>
</template>

<script setup lang="js">
import { useTemplateRef, watch } from 'vue'
const props = defineProps()
const videoRef = useTemplateRef('video')
watch(
  () => props.active,
  (active) => {
    if (active) {
      videoRef.value?.play()
    } else {
      videoRef.value?.pause()
    }
  },
)
</script>

多项展示

使用 slides-per-view 设置同时展示的滑块数量，配合 space-between 设置间距。

vue tsvue js

vue

<template>
  <s-swiper :slides-per-view="3" :space-between="20" show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: '#3b82f6', text: '1' },
  { color: '#6366f1', text: '2' },
  { color: '#a855f7', text: '3' },
  { color: '#ec4899', text: '4' },
  { color: '#ef4444', text: '5' },
  { color: '#f97316', text: '6' },
  { color: '#eab308', text: '7' },
  { color: '#22c55e', text: '8' },
  { color: '#14b8a6', text: '9' },
  { color: '#06b6d4', text: '10' },
])
</script>

vue

<template>
  <s-swiper :slides-per-view="3" :space-between="20" show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: '#3b82f6',
    text: '1',
  },
  {
    color: '#6366f1',
    text: '2',
  },
  {
    color: '#a855f7',
    text: '3',
  },
  {
    color: '#ec4899',
    text: '4',
  },
  {
    color: '#ef4444',
    text: '5',
  },
  {
    color: '#f97316',
    text: '6',
  },
  {
    color: '#eab308',
    text: '7',
  },
  {
    color: '#22c55e',
    text: '8',
  },
  {
    color: '#14b8a6',
    text: '9',
  },
  {
    color: '#06b6d4',
    text: '10',
  },
])
</script>

组切换

使用 slides-per-group 设置每次切换的滑块数量，配合 slides-per-view 可实现分组滑动效果。

vue tsvue js

vue

<template>
  <s-swiper :slides-per-view="3" :slides-per-group="2" :space-between="20" show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: '#3b82f6', text: '1' },
  { color: '#6366f1', text: '2' },
  { color: '#a855f7', text: '3' },
  { color: '#ec4899', text: '4' },
  { color: '#ef4444', text: '5' },
  { color: '#f97316', text: '6' },
  { color: '#eab308', text: '7' },
  { color: '#22c55e', text: '8' },
  { color: '#14b8a6', text: '9' },
  { color: '#06b6d4', text: '10' },
])
</script>

vue

<template>
  <s-swiper :slides-per-view="3" :slides-per-group="2" :space-between="20" show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: '#3b82f6',
    text: '1',
  },
  {
    color: '#6366f1',
    text: '2',
  },
  {
    color: '#a855f7',
    text: '3',
  },
  {
    color: '#ec4899',
    text: '4',
  },
  {
    color: '#ef4444',
    text: '5',
  },
  {
    color: '#f97316',
    text: '6',
  },
  {
    color: '#eab308',
    text: '7',
  },
  {
    color: '#22c55e',
    text: '8',
  },
  {
    color: '#14b8a6',
    text: '9',
  },
  {
    color: '#06b6d4',
    text: '10',
  },
])
</script>

缩放效果

通过 v-model 获取当前下标，结合 CSS transform 实现缩放切换效果。

vue tsvue js

vue

<template>
  <s-swiper v-model="current" :slides-per-view="2" centered-slides>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="[{ background: item.color }, dynamicItemStyle(index, current)]"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dynamicItemStyle = (index: number, activeIndex: number) => {
  return {
    transform: index === activeIndex ? 'scale(1)' : 'scale(0.8)',
    transition: 'transform 0.3s',
    borderRadius: '8px',
    overflow: 'hidden',
  }
}

const list = ref([
  { color: '#3b82f6', text: '1' },
  { color: '#6366f1', text: '2' },
  { color: '#a855f7', text: '3' },
  { color: '#ec4899', text: '4' },
  { color: '#ef4444', text: '5' },
  { color: '#f97316', text: '6' },
  { color: '#eab308', text: '7' },
  { color: '#22c55e', text: '8' },
  { color: '#14b8a6', text: '9' },
  { color: '#06b6d4', text: '10' },
])

const current = ref(0)
</script>

vue

<template>
  <s-swiper v-model="current" :slides-per-view="2" centered-slides>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="[{ background: item.color }, dynamicItemStyle(index, current)]"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const dynamicItemStyle = (index, activeIndex) => {
  return {
    transform: index === activeIndex ? 'scale(1)' : 'scale(0.8)',
    transition: 'transform 0.3s',
    borderRadius: '8px',
    overflow: 'hidden',
  }
}
const list = ref([
  {
    color: '#3b82f6',
    text: '1',
  },
  {
    color: '#6366f1',
    text: '2',
  },
  {
    color: '#a855f7',
    text: '3',
  },
  {
    color: '#ec4899',
    text: '4',
  },
  {
    color: '#ef4444',
    text: '5',
  },
  {
    color: '#f97316',
    text: '6',
  },
  {
    color: '#eab308',
    text: '7',
  },
  {
    color: '#22c55e',
    text: '8',
  },
  {
    color: '#14b8a6',
    text: '9',
  },
  {
    color: '#06b6d4',
    text: '10',
  },
])
const current = ref(0)
</script>

多项居中

使用 centered-slides 将活动滑块居中显示。

vue tsvue js

vue

<template>
  <s-swiper
    :slides-per-view="3"
    :slides-per-group="2"
    :space-between="20"
    show-indicator
    centered-slides
  >
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: '#3b82f6', text: '1' },
  { color: '#6366f1', text: '2' },
  { color: '#a855f7', text: '3' },
  { color: '#ec4899', text: '4' },
  { color: '#ef4444', text: '5' },
  { color: '#f97316', text: '6' },
  { color: '#eab308', text: '7' },
  { color: '#22c55e', text: '8' },
  { color: '#14b8a6', text: '9' },
])
</script>

vue

<template>
  <s-swiper
    :slides-per-view="3"
    :slides-per-group="2"
    :space-between="20"
    show-indicator
    centered-slides
  >
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: '#3b82f6',
    text: '1',
  },
  {
    color: '#6366f1',
    text: '2',
  },
  {
    color: '#a855f7',
    text: '3',
  },
  {
    color: '#ec4899',
    text: '4',
  },
  {
    color: '#ef4444',
    text: '5',
  },
  {
    color: '#f97316',
    text: '6',
  },
  {
    color: '#eab308',
    text: '7',
  },
  {
    color: '#22c55e',
    text: '8',
  },
  {
    color: '#14b8a6',
    text: '9',
  },
])
</script>

自动高度

使用 auto-height 让轮播容器自动适应当前滑块的高度，适用于每个滑块内容高度不一致的场景。

vue tsvue js

vue

<template>
  <s-swiper auto-height show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full text-2xl"
        :style="{
          background: item.color,
          height: item.height,
        }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { color: 'var(--s-color-danger)', text: '短内容', height: '150px' },
  { color: 'var(--s-color-success)', text: '较高的内容\n第二行文字', height: '250px' },
  { color: 'var(--s-color-primary)', text: '中等内容', height: '180px' },
])
</script>

vue

<template>
  <s-swiper auto-height show-indicator>
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex justify-center items-center text-white w-full text-2xl"
        :style="{
          background: item.color,
          height: item.height,
        }"
      >
        {{ item.text }}
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '短内容',
    height: '150px',
  },
  {
    color: 'var(--s-color-success)',
    text: '较高的内容\n第二行文字',
    height: '250px',
  },
  {
    color: 'var(--s-color-primary)',
    text: '中等内容',
    height: '180px',
  },
])
</script>

嵌套轮播

Swiper 支持嵌套使用，内外层轮播互不干扰，各自独立滑动。

vue tsvue js

vue

<template>
  <s-swiper show-indicator style="height: 200px">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex flex-col justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        <p>{{ item.text }}</p>
        <s-swiper show-indicator style="width: 80%; height: 100px; margin: 10px 0">
          <s-swiper-item v-for="(sub, subIdx) in item.children" :key="subIdx">
            <div
              class="flex justify-center items-center text-white text-sm rounded"
              style="width: 100%; height: 100%"
              :style="{ background: sub.color }"
            >
              {{ sub.text }}
            </div>
          </s-swiper-item>
        </s-swiper>
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '外层 1',
    children: [
      { color: 'rgba(0,0,0,0.3)', text: '内 1-1' },
      { color: 'rgba(0,0,0,0.5)', text: '内 1-2' },
    ],
  },
  {
    color: 'var(--s-color-success)',
    text: '外层 2',
    children: [
      { color: 'rgba(0,0,0,0.3)', text: '内 2-1' },
      { color: 'rgba(0,0,0,0.5)', text: '内 2-2' },
    ],
  },
  {
    color: 'var(--s-color-primary)',
    text: '外层 3',
    children: [
      { color: 'rgba(0,0,0,0.3)', text: '内 3-1' },
      { color: 'rgba(0,0,0,0.5)', text: '内 3-2' },
    ],
  },
])
</script>

vue

<template>
  <s-swiper show-indicator style="height: 200px">
    <s-swiper-item v-for="(item, index) in list" :key="index">
      <div
        class="flex flex-col justify-center items-center text-white w-full h-full text-2xl"
        :style="{ background: item.color }"
      >
        <p>{{ item.text }}</p>
        <s-swiper show-indicator style="width: 80%; height: 100px; margin: 10px 0">
          <s-swiper-item v-for="(sub, subIdx) in item.children" :key="subIdx">
            <div
              class="flex justify-center items-center text-white text-sm rounded"
              style="width: 100%; height: 100%"
              :style="{ background: sub.color }"
            >
              {{ sub.text }}
            </div>
          </s-swiper-item>
        </s-swiper>
      </div>
    </s-swiper-item>
  </s-swiper>
</template>

<script setup lang="js">
import { ref } from 'vue'
const list = ref([
  {
    color: 'var(--s-color-danger)',
    text: '外层 1',
    children: [
      {
        color: 'rgba(0,0,0,0.3)',
        text: '内 1-1',
      },
      {
        color: 'rgba(0,0,0,0.5)',
        text: '内 1-2',
      },
    ],
  },
  {
    color: 'var(--s-color-success)',
    text: '外层 2',
    children: [
      {
        color: 'rgba(0,0,0,0.3)',
        text: '内 2-1',
      },
      {
        color: 'rgba(0,0,0,0.5)',
        text: '内 2-2',
      },
    ],
  },
  {
    color: 'var(--s-color-primary)',
    text: '外层 3',
    children: [
      {
        color: 'rgba(0,0,0,0.3)',
        text: '内 3-1',
      },
      {
        color: 'rgba(0,0,0,0.5)',
        text: '内 3-2',
      },
    ],
  },
])
</script>

API

SwiperProps

属性	描述	类型	默认值
model-value	当前滑块的下标	number	0
show-indicator	是否显示指示点	boolean	false
vertical	滑动方向是否为纵向	boolean	false
speed	滑动动画时长（ms）	number	300
autoplay	是否自动播放	boolean	false
delay	自动播放间隔时间（ms）	number	3000
loop	是否启用循环滑动	boolean	false
slides-per-view	同时展示的滑块数量	number	1
slides-per-group	每次切换的滑块数量	number	1
space-between	滑块之间的间距（px）	number	0
centered-slides	是否居中显示活动滑块	boolean	false
allow-touch-move	是否允许触摸滑动	boolean	true
auto-height	是否自动适应内容高度	boolean	false

SwiperEmits

事件	描述	类型
change	滑块切换时触发	`(index: number) => void`
update:model-value	滑块切换时触发	`(index: number) => void`

SwiperSlots

插槽名	描述
default	轮播项的内容

主题定制

样式变量

CSS 变量	值
`--s-swiper-height`	`150px`
`--s-swiper-dots-margin`	`10px`
`--s-swiper-dots-gap`	`6px`
`--s-swiper-dot-bg`	`rgba(255, 255, 255, 0.3)`
`--s-swiper-dot-width`	`6px`
`--s-swiper-dot-width-active`	`6px`
`--s-swiper-dot-height`	`6px`
`--s-swiper-dot-height-active`	`6px`
`--s-swiper-dot-border-radius`	`var(--s-border-radius-full)`
`--s-swiper-dot-bg-active`	`var(--s-white)`

介绍 ​

代码演示 ​

基础使用 ​

纵向滚动 ​

循环滑动 ​

自动播放 ​

自定义指示器 ​

展示标题 ​

嵌入视频 ​

多项展示 ​

组切换 ​

缩放效果 ​

多项居中 ​

自动高度 ​

嵌套轮播 ​

API ​

SwiperProps ​

SwiperEmits ​

SwiperSlots ​

主题定制 ​

样式变量 ​

介绍

代码演示

基础使用

纵向滚动

循环滑动

自动播放

自定义指示器

展示标题

嵌入视频

多项展示

组切换

缩放效果

多项居中

自动高度

嵌套轮播

API

SwiperProps

SwiperEmits

SwiperSlots

主题定制

样式变量