当前位置：首页 > VUE

vue swiper 轮播实现

2026-01-17 02:51:23VUE

Vue Swiper 轮播实现

安装 Swiper 依赖

确保项目已安装 Swiper 和 Vue-Awesome-Swiper 库。通过 npm 或 yarn 安装：

npm install swiper vue-awesome-swiper
# 或
yarn add swiper vue-awesome-swiper

引入 Swiper 组件

在 Vue 组件中引入 Swiper 核心模块和样式：

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

基础轮播实现

在模板中使用 <swiper> 和 <swiper-slide> 标签：

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

添加导航和分页

引入导航和分页模块并配置：

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

export default {
  components: { Swiper, SwiperSlide },
  setup() {
    const onSwiper = (swiper) => console.log(swiper);
    const onSlideChange = () => console.log('slide change');
    return {
      modules: [Navigation, Pagination],
      onSwiper,
      onSlideChange,
      slides: ['Slide 1', 'Slide 2', 'Slide 3']
    };
  }
};

自定义样式和配置

通过 :options 传递 Swiper 配置对象：

<swiper
  :modules="modules"
  :slides-per-view="1"
  :pagination="{ clickable: true }"
  :navigation="true"
>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
</swiper>

响应式配置

使用 breakpoints 实现不同屏幕尺寸适配：

const swiperOptions = {
  breakpoints: {
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 }
  }
};

自动播放和循环

添加 autoplay 和 loop 模块：

vue swiper 轮播实现

import { Autoplay } from 'swiper/modules';

modules: [Autoplay],
autoplay: { delay: 3000 },
loop: true

注意事项

Swiper 的 CSS 文件需全局引入（如在 main.js 中）。
动态数据更新时，调用 swiper.update() 方法确保渲染正确。
移动端需添加 touch-events 相关 polyfill 以兼容旧浏览器。

标签: vue swiper

分享给朋友：

验证码实现vue

验证码实现（Vue）使用组件库（如Element UI） Element UI提供了现成的验证码组件，可直接集成到Vue项目中。安装Element UI： npm install elemen…

vue中登陆实现逻辑

Vue 中登录实现逻辑前端实现逻辑表单验证使用 Vue 的表单验证库（如 VeeValidate）或自定义验证规则，确保用户输入的账号和密码符合要求。例如，检查邮箱格式、密码长度等。发送登录…

vue实现div

Vue 实现 DIV 元素的方法在 Vue 中实现 DIV 元素可以通过多种方式，以下是几种常见的实现方法：使用模板语法在 Vue 的模板中直接使用 HTML 的 <div> 标签…

vue实现slider

Vue 实现 Slider 组件使用 Vue 实现 Slider 组件可以通过原生开发或借助第三方库。以下是两种常见方法：原生实现 Slider 创建一个基础的 Slider 组件，通过 v-m…

vue实现$.extend

Vue 实现类似 jQuery 的 $.extend 功能在 Vue 中实现类似 jQuery 的 $.extend 功能，可以通过多种方式完成。$.extend 主要用于合并多个对象的属性，Vue…

vue实现123456

Vue 实现数字 123456 的显示在 Vue 中显示数字 123456 非常简单，可以通过以下方法实现：方法一：直接在模板中显示 <template> <div>…

vue swiper 轮播实现