使用vue-awesome-swiper插件制作轮播图
时间:2020-07-15
本文章向大家介绍使用vue-awesome-swiper插件制作轮播图,主要包括使用vue-awesome-swiper插件制作轮播图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在前端开发中,经常需要在首页实现轮播图
本文将以win平台为例,详细介绍在vue项目中引入并使用vue-awesome-swiper插件的一般流程
一、安装 vue-awesome-swiper 库
参照 vue-awesome-swiper 的官方文档
在vue项目的根目录下打开git bash
通过如下命令 全局安装vue-swesome-swiper库
//安装最新版本
npm install vue-awesome-swiper --save
//安装旧版本
npm install vue-awesome-swiper@2.6.7 --save
在main.js头部分别添加下列语句
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
二、基础使用指南
轮播图的基础结构:
<template>
<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
<!-- 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>
<swiper-slide>I'm Slide 4</swiper-slide>
<!-- Optional controls -->
<!-- pagination 即底部页码 -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- button-prev 即跳转到前一项的按钮 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<!-- button-next 即跳转到后一项的按钮 -->
<div class="swiper-button-next" slot="button-next"></div>
<!-- scrollbar 即底部滚动条 -->
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
设定相关的配置项:
<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination', //引入轮播图页码
loop: true //启用前后循环(最后一项左滑进入第一项)
}
}
}
}
</script>
其他配置项请参考 vue-awesome-swiper 的官方文档
原文地址:https://www.cnblogs.com/baebae996/p/13308532.html
- 万物智联慧结成网:信息技术驱动物流产业转型升级
- 用Qt写软件系列五:一个安全防护软件的制作(1)
- Linux文件管理
- 为什么区块链会成为消除数字化营销障碍的解决方案
- TinyOS和Deluge的安装模拟(二)
- Kubernetes的服务网格(第4部分):通过流量切换持续部署
- QTableView表格视图的列宽设置
- OpenProcess打开进程返回错误的问题
- Python标准库01 正则表达式 (re包)
- 剑指OFFER之栈的压入、弹出序列(九度OJ1366)
- Python标准库03 路径与文件 (os.path包, glob包)
- AI人工智能时代已经到来 “北斗即时判”实现纯语音交互
- 剑指OFFER之链表中倒数第k个节点(九度OJ1517)
- 用Qt写软件系列四:定制个性化系统托盘菜单
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法