【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、npm 下载swiper
  • 二、使用步骤
    • 1.引入库+声明变量
    • 2.编写页面
    • 3.执行js
  • 总结


前言

swiper轮播图官网

参考文章,最好先看完他的介绍,再看我的。
swiper,vue中swiper的应用,swiper各个版本在vue项目中应用

官方效果 传送门

更多效果 传送门


提示:以下是本篇文章正文内容,下面案例可供参考

一、npm 下载swiper

npm install swiper@5.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 style="background-color: #fff;"><div class="banshi"><h1>办事查询</h1><div class="swiper-container"><div class="swiper-wrapper"><div v-for="item in swiperList" :key="item.id" class="swiper-slide":style="`background-image:url(${item.imgUrl})`"><h3>{{ item.title }}</h3><el-button>立即办理</el-button></div></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div><div class="swiper-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组件组件实战保姆级教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/52817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF中的数据转换-StringFormat

WPF中的数据转换-StringFormat 前言 字符串格式化。使用该功能可以通过设置Binding.StringFormat属性对文本形式的数据进行转换——例如包含日期和数字的字符串。对于至少一半的格式化任务&#xff0c;字符串格式化是一种便捷的技术。 使用 当设置Binding.StringFormat属性…

基于微信小程序的餐厅预订系统的设计与实现(论文+源码)_kaic

摘 要 随着消费升级&#xff0c;越来越多的年轻人已经开始不再看重餐饮等行业的服务&#xff0c;而是追求一种轻松自在的用餐、购物环境。因此&#xff0c;无人餐厅、无人便利店、无人超市等一些科技消费场所应势而生。餐饮企业用工荒已成为不争的事实。服务员行业的低保障、低…

Centos开启防火墙和端口命令

Centos开启防火墙和端口命令 1. 开启查看关闭firewalld服务状态2. 查看端口是否开放3. 新增开放端口4. 查看开放的端口 1. 开启查看关闭firewalld服务状态 #启动/关闭firewall systemctl start/stop firewalld #查看防火墙状态 systemctl status firewalld #禁用或者启用 syst…

pytorch 实现VGG

VGG全称是Visual Geometry Group&#xff0c;因为是由Oxford的Visual Geometry Group提出的。AlexNet问世之后&#xff0c;很多学者通过改进AlexNet的网络结构来提高自己的准确率&#xff0c;主要有两个方向&#xff1a;小卷积核和多尺度。而VGG的作者们则选择了另外一个方向&a…

九五从零开始的运维之路(其三十六)

文章目录 前言一、集群概述1.负载均衡技术类型&#xff08;一&#xff09;四层负载均衡器&#xff08;二&#xff09;七层负载均衡器 2.负载均衡实现方式&#xff08;一&#xff09;硬件负载均衡产品&#xff1a;&#xff08;二&#xff09;软件负载均衡产品&#xff1a; 二、L…

[蓝帽杯 2022 初赛]domainhacker

打开流量包&#xff0c;追踪TCP流&#xff0c;看到一串url编码 放到瑞士军刀里面解密 最下面这一串会觉得像base64编码 删掉前面两个字符就可以base64解码 依次类推&#xff0c;提取到第13个流&#xff0c;得到一串编码其中里面有密码 导出http对象 发现最后有个1.rar文件 不出…

Vue使用ffmpeg,报ReferenceError: SharedArrayBuffer is not defined 如何解决

“SharedArrayBuffer is not defined” 错误是因为在浏览器环境中&#xff0c;SharedArrayBuffer 对象被认为是一种潜在的安全风险。为了防止 Spectre 攻击等漏洞&#xff0c;现代浏览器通常会禁用或限制对 SharedArrayBuffer 的使用。 SharedArrayBuffer 是一种 JavaScript 对…

前端面试:【代码质量与工程实践】单元测试、集成测试和持续集成

在现代软件开发中&#xff0c;确保代码质量是至关重要的。单元测试、集成测试和持续集成是关键的工程实践&#xff0c;用于提高代码的可靠性和可维护性。本文将深入探讨这些概念&#xff0c;以及它们如何在软件开发中发挥作用。 1. 单元测试&#xff08;Unit Testing&#xff0…

SpringBoot案例-登录校验-概述

登录存在的问题 在未登录的情况下&#xff0c;我们也可以直接访问部门管理、员工管理等功能由于Http协议是无状态的&#xff0c;即每次请求都是独立的&#xff0c;下一次的请求不会携带上一次的数据&#xff0c;服务器无法判断是否已经登录。 登录校验 如何实现登录校验 在员…

Agile Iteration Velocity

【agile iteration velocity】敏捷速度指的平均速度 第四次迭代结束速度&#xff1a; 76 / 4 19 第五次迭代结束速度&#xff1a; &#xff08;76 24 &#xff09; / 5 100 / 5 20

spark第四课

countByValue 数据源中相同的值有多少个,也就是WordCount countByKey 表的是键值对中的key出现了几次,与Value的值无关 不推荐collect,因为他是将数据放入内存,但是内存不够大的话,就容易崩,所以使用saveAsTextFile更好,直接放入磁盘. 保存成对象文件,需要序列化 启动了2个 J…

【Spring Boot】社交网站中验证用户登录的checkUser方法

public boolean checkUser(User user) {User userInDb userRepository.findByUsername(user.getUsername());if (userInDb ! null && userInDb.getPassword().equals(user.getPassword())) {return true;} else {return false;}} } 这段代码是UserService类中的checkU…

并查集(种类并查集,带权并查集)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 动物王国中有三类动物A,B,C&#xff0c;这三类动物的食物链构成了有趣的环形。A吃B&#xff0c;B吃C&#xff0c;C吃A。 现有N个动物&#xff0c;以1&#xff0d;N编号。每个动物都…

C++有向、无向完全图的边数

一、无向完全图 一个拥有n个结点的无向完全图的边数为&#xff1a; 公式&#xff1a; 简写&#xff1a; &#xff08;表示个顶点中有条边&#xff09; 具体的解释&#xff1a; 比如我们有一个拥有个结点的无向完全图 我们首尾依次连接&#xff0c;共有条边。 然后我们选择…

九、pikachu之敏感信息泄露

文章目录 1、敏感信息泄露概述2、实战 1、敏感信息泄露概述 由于后台人员的疏忽或者不当的设计&#xff0c;导致不应该被前端用户看到的数据被轻易的访问到。 比如&#xff1a; 通过访问url下的目录&#xff0c;可以直接列出目录下的文件列表;输入错误的url参数后报错信息里面…

Windows - DWM - 桌面窗口管理器内存泄漏BUG(桌面窗口管理器内存占用过高)

Windows - DWM - 桌面窗口管理器内存泄漏BUG&#xff08;桌面窗口管理器内存占用过高&#xff09; 前言 有时候笔记本使用者使用者就感觉不对劲&#xff0c;有种强烈的延时感。打开任务管理器一看&#xff0c;好家伙&#xff0c;桌面窗口管理器&#xff08;Desktop Window Ma…

Java中Comparable和Comparator有什么区别?

1. 字面含义不同 Comparable字面意思是“具有比较能力”&#xff0c;Comparator字面意思是“比较器”。 2. 用法不同 Comparable用法&#xff1a;对需要排序的类&#xff0c;实现Comparable接口&#xff0c;重写compareTo()方法。 Comparator用法&#xff1a;创建自定义比较…

OpenCV基础知识(7)— 腐蚀与膨胀

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。腐蚀和膨胀是图像形态学中的两种核心操作&#xff0c;通过这两种操作可以清除或者强化图像中的细节。本节课就对OpenCV中的腐蚀和膨胀操作进行详细的介绍。&#x1f308; 前期回顾&#xff1a; OpenCV基础知识&#xff08;…

记录--为什么要使用 package-lock.json?

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 随着JavaScript在现代软件开发中的日益重要地位&#xff0c;Node.js生态系统中的npm成为了不可或缺的工具。在npm管理依赖的过程中&#xff0c;package-lock.json文件的作用日益凸显。本文将深入…

LeetCode108. 将有序数组转换为二叉搜索树

108. 将有序数组转换为二叉搜索树 一、题目 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 示例 1&#x…