当前位置：首页 > VUE

vue swiper实现图片轮播

2026-01-21 00:53:54VUE

安装 Swiper 依赖

在 Vue 项目中安装 Swiper 和对应的 Vue 封装库：

npm install swiper vue-awesome-swiper

引入 Swiper 组件和样式

在需要使用的组件中引入 Swiper 和样式文件：

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

基本轮播实现

在模板中使用 Swiper 组件，绑定图片数据：

<template>
  <swiper
    :slides-per-view="1"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image.url" :alt="image.alt">
    </swiper-slide>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'image1.jpg', alt: 'Image 1' },
        { url: 'image2.jpg', alt: 'Image 2' },
        { url: 'image3.jpg', alt: 'Image 3' }
      ]
    }
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log('slide change');
    }
  }
}
</script>

添加导航和分页

引入 Pagination 和 Navigation 模块并配置：

import { Pagination, Navigation } from 'swiper/modules';

export default {
  setup() {
    return {
      modules: [Pagination, Navigation],
    };
  },
  // 其他代码...
}

在模板中添加对应配置：

<swiper
  :slides-per-view="1"
  :space-between="50"
  :pagination="{ clickable: true }"
  :navigation="true"
  :modules="modules"
>
  <!-- swiper-slide内容 -->
</swiper>

自动播放配置

添加 Autoplay 模块并配置：

import { Autoplay } from 'swiper/modules';

export default {
  setup() {
    return {
      modules: [Autoplay],
    };
  },
  // 其他代码...
}

在模板中配置自动播放：

<swiper
  :autoplay="{
    delay: 2500,
    disableOnInteraction: false,
  }"
  :modules="modules"
>
  <!-- swiper-slide内容 -->
</swiper>

响应式配置

通过 breakpoints 属性实现不同屏幕尺寸下的不同显示：

<swiper
  :breakpoints="{
    320: {
      slidesPerView: 1,
      spaceBetween: 20
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 30
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 40
    }
  }"
>
  <!-- swiper-slide内容 -->
</swiper>

完整示例代码

<template>
  <swiper
    :slides-per-view="1"
    :space-between="50"
    :pagination="{ clickable: true }"
    :navigation="true"
    :autoplay="{ delay: 2500 }"
    :modules="modules"
    :breakpoints="breakpoints"
  >
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image.url" :alt="image.alt">
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  setup() {
    return {
      modules: [Pagination, Navigation, Autoplay],
      breakpoints: {
        320: { slidesPerView: 1 },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    };
  },
  data() {
    return {
      images: [
        { url: 'image1.jpg', alt: 'Image 1' },
        { url: 'image2.jpg', alt: 'Image 2' },
        { url: 'image3.jpg', alt: 'Image 3' }
      ]
    };
  }
};
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 300px;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

vue swiper实现图片轮播