当前位置：首页 > VUE

vue实现轮播的插件

2026-01-21 15:19:51VUE

vue-awesome-swiper

基于 Swiper.js 的 Vue 轮播组件，支持响应式布局、自定义分页器和导航按钮。

安装：

npm install swiper vue-awesome-swiper --save

基本用法：

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      {{ slide }}
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      swiperOptions: {
        pagination: { el: '.swiper-pagination' },
        loop: true
      }
    };
  }
};
</script>

vue-carousel

轻量级轮播插件，支持触摸滑动和自动播放。

vue实现轮播的插件

安装：

npm install vue-carousel --save

示例代码：

vue实现轮播的插件

<template>
  <carousel :perPage="1" :autoplay="true">
    <slide v-for="(item, index) in items" :key="index">
      <img :src="item.image" />
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
  components: { Carousel, Slide },
  data() {
    return {
      items: [{ image: 'path/to/image1.jpg' }, { image: 'path/to/image2.jpg' }]
    };
  }
};
</script>

swiper/vue

Swiper 官方提供的 Vue 版本，功能全面且高度可定制。

安装：

npm install swiper@latest

使用方式：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="30"
    @swiper="onSwiper"
  >
    <swiper-slide v-for="(item, index) in list" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    const onSwiper = (swiper) => console.log(swiper);
    return {
      modules: [Navigation, Pagination],
      list: ['Item 1', 'Item 2', 'Item 3'],
      onSwiper
    };
  }
};
</script>