如何开发公司的网站,l凉州区城乡建设部网站首页,网站换程序,南阳做网站的公提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、npm 下载swiper二、使用步骤1.引入库声明变量2.编写页面3.执行js 总结 前言
swiper轮播图官网
参考文章#xff0c;最好先看完他的介绍#xff0c;再看… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 前言一、npm 下载swiper二、使用步骤1.引入库声明变量2.编写页面3.执行js 总结 前言
swiper轮播图官网
参考文章最好先看完他的介绍再看我的。 swipervue中swiper的应用swiper各个版本在vue项目中应用
官方效果 传送门
更多效果 传送门 提示以下是本篇文章正文内容下面案例可供参考
一、npm 下载swiper
npm install swiper5.4.5 -S二、使用步骤
1.引入库声明变量
代码如下示例
import Swiper from swiper; // 注意引入的是Swiper
import swiper/css/swiper.min.css // 注意这里的引入
export default {name: vinit,components: {},data() {return {swiper: null,swiperList: [{id: 1,title: 采集国家二级保护野生植物审批,imgUrl: require(/assets/image/banshi-01.png),}, {id: 2,title: 农村危房改造,imgUrl: require(/assets/image/banshi-02.png),}, {id: 3,title: 乡村医生执业注册,imgUrl: require(/assets/image/banshi-03.png),}, {id: 4,title: 生鲜乳准运证明核发,imgUrl: require(/assets/image/banshi-04.png),}, {id: 5,title: 常量命名全部大写单词间用下划线隔开力求语义表达完整清楚 不要嫌名字长,imgUrl: require(/assets/image/banshi-01.png),}, {id: 6,title: 使用 2 个空格进行缩进,imgUrl: require(/assets/image/banshi-02.png),}, {id: 7,title: 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以 提升可读性,imgUrl: require(/assets/image/banshi-03.png),}, {id: 8,title: 使用字面量来代替对象构造器,imgUrl: require(/assets/image/banshi-04.png),}]......2.编写页面
代码如下示例
div stylebackground-color: #fff;div classbanshih1办事查询/h1div classswiper-containerdiv classswiper-wrapperdiv v-foritem in swiperList :keyitem.id classswiper-slide:stylebackground-image:url(${item.imgUrl})h3{{ item.title }}/h3el-button立即办理/el-button/div/divdiv classswiper-pagination/divdiv classswiper-button-next/divdiv classswiper-button-prev/div/div/div
/div样式如下
.banshi {width: 1200px;margin: 0 auto;padding: 70px 0;.swiper-slide {position: relative;height: 328px;width: 264px;padding: 36px 22px;background-repeat: no-repeat;background-size: contain;background-color: #F7F8FA;.el-button {z-index: 2;}}}3.执行js
getSwiper() {this.swiper new Swiper(.swiper-container, {loop: true, // 无缝autoplay: { //自动开始delay: 3000, //时间间隔disableOnInteraction: false, //*手动操作轮播图后不会暂停*},paginationClickable: true,slidesPerView: 4, // 一组三个spaceBetween: 30, // 间隔// 如果需要前进后退按钮navigation: {nextEl: .swiper-button-next,prevEl: .swiper-button-prev,},// 如果需要分页器pagination: {el: .swiper-pagination,clickable: true, // 分页器可以点击},})
}一定要在mounted里面去执行只有页面上轮播内容循环结束了才可以初始化swiper
mounted() {this.getSwiper()},效果如下 总结
vue2使用swiper组件组件实战保姆级教程
