vue-awesome-swiper 插件
2024-09-03 14:42:10
Swiper 版本区分了组件和普通版本
(1)npm install vue-awesome-swiper –save
(2)在 main,js 里引入(全局):
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'
(3)组件里引入 :
import ‘swiper/dist/css/swiper.css’ //在全局没引入,这里记得要!
import { swiper, swiperSlide } from ‘vue-awesome-swiper’
export default {
components: {
swiper,
swiperSlide
}
}
配置
(4)template
<swiper :options="swiperOption">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> </swiper>
(5)数据
data(){
return{
swiperOption: {
pagination:{
el:'.swiper-pagination'
},
autoplay:{
delay:,
disableOnInteraction:false
}
swiper参数
}
}
}
.
最新文章
- js数组常用方法汇总
- Razor视图引擎输出没有编码的 Html 字符串
- Qt学习笔记:Qt中使用Lua
- 横竖屏切换时候Activity的生命周期
- NIO组件Selector详解
- 模板-->;单变元模线性方程
- margin-top失效及解决办法
- Python实现Windows定时关机
- load data infile
- 目标检测(一) R-CNN
- Bootstrap 栅格 样式 组件 插件
- python API whoami
- wmv 播放器
- Error: Program type already present: com.google.gson.FieldAttributes 的解决方法
- Java中List与数组互相转化
- browser-sync &; http server
- C++:sprintf()的用法(转)
- .net Core 发布并布署到Iis
- [转]ISTQB FL初级认证考试资料(中文)
- web.xml中配置spring配置(application.xml)文件
热门文章
- c#类—成员函数和封装及构造函数、析构函数、静态成员
- 如何实现Vue已经弃用的$dispatch和$broadcast方法?
- ajaxForm上传文件到本地服务器(封装)
- JavaScript数组及相关方法
- DB2 学习--(1)--安装教程
- Android Activity生命周期(转)
- C - Brackets
- 未能载入软件包“WebDriverAgentRunner”,因为它已损坏或丢失必要的资源。
- bzoj 4695: 最假女选手 &;&; Gorgeous Sequence HDU - 5306 &;&; (bzoj5312 冒险 || 小B的序列) &;&; bzoj4355: Play with sequence
- 牛客网Java刷题知识点之方法覆盖(方法重写)和方法重载的区别