vue-awesome-swiper插件书写移动端基本的轮播图

最新推荐文章于 2025-05-31 20:13:02 发布

原创

最新推荐文章于 2025-05-31 20:13:02 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中通过vue-awesome-swiper插件创建基本的移动端轮播图。首先，使用vue-cli搭建项目并用npm安装插件。接着全局引入插件，在main.js中配置。轮播图组件代码展示，包含简单的分页点，无左右键和滚动条。为实现自动和循环播放，需配置相应选项，特别指出pagination配置的注意事项。最后，展示了完成的轮播图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装：利用vue-cli这个工具创建一个vue项目，然后在项目中安装这个插件，详细方式可见官网，我用的是npm安装

npm install vue-awesome-swiper --save

引入这个插件：一般情况下可能多个页面要使用到轮播图，就全局引入这个插件，当然如果只需要局部用这个插件可以局部引用。我使用的是全局引用。

在main.js文件中添加下面三句（即引入了这个轮播插件）：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

然后就可以利用这个插件写轮播组件了，下面是一个整的样子，自己可根据需求进行适当的删减

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div&