vue2 使用 Swiper vue-awesome-swiper 实现轮播效果

前端小白的成长历程

已于 2022-02-25 14:10:02 修改

阅读量514

点赞数

文章标签： vue.js javascript 前端

于 2022-02-25 14:09:38 首次发布

本文链接：https://blog.csdn.net/weixin_60570544/article/details/123131453

版权

本文介绍如何在Vue2项目中利用vue-awesome-swiper和swiper5.4.5版本创建轮播效果。首先通过命令行安装依赖，然后在main.js中全局注册，接着在组件中编写相关代码并添加样式，最后在APP.vue中引用组件，运行项目即可展示轮播图。

摘要由CSDN通过智能技术生成

使用vue2以及swiper5.4.5 vue-awesome-swiper实现轮播效果

首先使用命令行

1安装

cnpm install swiper@5.4.5 vue-awesome-swiper --save

swiper一定要是5.4.5版本，安装完成后

main.js中引入做全局注册

import Vue from 'vue'
import App from './App.vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper)
new Vue({
  render: h => h(App),
}).$mount('#app')

在自己创建的组件中 .vue文件中写入

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div