江在川上曰：vue中使用swiper

vue中使用swiper

1 安装

//这是swiper组件
npm install vue-awesome-swiper --save-dev
//这是swiper组件的依赖包
npm install --save swiper

2 全局注册

在main.js中进行全局注册，这样便能在全局使用组件。

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
require('swiper/css/swiper.css')
Vue.use(VueAwesomeSwiper)

3 开始使用

<template><div><swiper :options="swiperOption"><swiper-slide class="swiper-slide" v-for="(item,index) in images" :key="index"><img :src="item"/></swiper-slide><!-- 分页器 --><div class="swiper-pagination"  slot="pagination"></div>   <!-- 左右箭头 --> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper></div>
</template><script>
export default {data(){return{//要进行显示的图片数组images:[],swiperOption:{//显示分页pagination: {el: '.swiper-pagination'},//设置点击箭头navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'},//自动轮播autoplay: {delay: 2000,//当用户滑动图片后继续自动轮播disableOnInteraction: false,},//开启循环模式loop: true}}}
}
</script><style></style>

最终显示：

其他使用请参考官方文档：https://github.surmon.me/vue-awesome-swiper/

本次学习到此结束。

江在川上曰：vue中使用swiper相关推荐

江在川上曰：js中的JSON解析和序列化
江在川上曰:js中的JSON解析和序列化 JSON解析和序列化 JSON是javascript的一个严格的子集,利用了javacript中的一些模式来表示结构化数据.他只是一种数据格式,并非一种编程语 ...
江在川上曰：云服务器上的flask项目部署(Ubuntu+Flask+Gunicorn+Supervisor+Nginx+Anaconda)
云服务器上的flask项目部署(anaconda.python.flask等相关安装) 在探索未知的路上走了很多弯路,这里记载了我在阿里云上部署项目切实可行的步骤,当然问题因人而异,没有四海皆适用的准 ...
江在川上曰：webpack前端工程化
前端工程化 1.模块化相关规范 1.1浏览器端模块化规范名称文件 AMD Require.js CMD Sea.js 1.2 服务器端模块规范 common.js 1.3 大一统的模块化规范(ES ...
江在川上曰：JS函数
函数函数的定义方式自定义函数(命名函数) 函数表达式(匿名函数) 利用 new Function("参数1","参数2","函数体") ...
江在川上曰：less样式预编译
less样式预编译 1.css原生变量定义使用"–"进行变量定义使用var()进行变量的引用 --bgColor:red; background:var(--bgColor); ...
vue中使用swiper，vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper 在刚开始vue中使用swiper的时候,按照文档默认下载的是swiper6,这个版本有很多坑,比如 ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
在vue中使用swiper轮播图（亲测有效）
在vue中使用swiper轮播图(亲测有效) 1.新建vue项目 2.装swiper的包 3.使用swiper 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的, ...

江在川上曰：vue中使用swiper

vue中使用swiper

1 安装

2 全局注册

3 开始使用

江在川上曰：vue中使用swiper相关推荐

最新文章

热门文章