Vue引入第三方

以轮播图为例

Swiper开源、免费、强大的触摸滑动插件

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

Swiper能实现触屏焦点图、触屏tab切换、触屏轮播图切换等常用效果

插件官方文档网址：Swiper Vue幻灯片切换组件 | SwiperJS中文网

安装指定版本的命令为：npm install –save swiper@8.1.6

<template><div><swiper :modules="modules" :navigation="true" :loop="true" :pagination="{ clickable: true }"><!-- modules为导入的模块，绑定导入的模块导航模块和分页模块，loop实现轮播图循环模式 --><swiper-slide><img src="../assets/logo.png"></swiper-slide><swiper-slide><img src="../assets/logo.png"></swiper-slide><swiper-slide><img src="../assets/logo.png"></swiper-slide></swiper></div>
</template><script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import { Navigation } from 'swiper';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {name: 'HelloWorld',components: {Swiper,SwiperSlide,},data() {return {modules: [Navigation, Pagination]}}
}
</script>

vue3学习（引入轮播图插件）相关推荐

Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
原生JS实现轮播图插件
HTML部分只提供存放轮播图的容器,img标签等全部由js操作dom元素动态生成,样式部分也由js 完成 html代码部分 <div id=& ...
Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
来给你20个优秀的......前端轮播图插件
上期入口:24个 CSS 高级技巧合集这20个,可都是咱们村最好的,年龄都不超过25,一个比一个长的好看.你加人家微信先聊,总有一个你喜欢的.老大不小的人了,别太挑,遇到合适的,就去Github搬过 ...
html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel
插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法在页面中引入jquery. ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

vue3学习（引入轮播图插件）

Vue引入第三方

vue3学习（引入轮播图插件）相关推荐

最新文章

热门文章