当前位置: 首页 > news >正文

vue2踩坑之项目:Swiper轮播图使用

首先安装swiper插件

npm i swiper@5

安装出现错误:npm ERR

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jing\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jing\AppData\Local\npm-cache\_logs\2023-03-22T08_20_28_486Z-debug-0.log

解决方法:npm 版本太高,切换一下就好了

如下代码 运行后再重新 npm i

npm install npm@6.14.15 -g

引入Swiper

// 可以直接在组件里引入这个文件

//导入js

import Swiper from "swiper";

//引入css

import "swiper/css/swiper.min.css";

代码:

//html结构
<template><!-- 记得将swiper修改过来 --><div class="swiper-container" id="swiperContainer"><div class="swiper-wrapper"><div class="swiper-slide" style="background-color: #0091FE;"><h1>Page 01</h1></div><div class="swiper-slide" style="background-color: #43D7B5;"><h1>Page 02</h1></div><div class="swiper-slide" style="background-color: #6DD400;"><h1>Page 03</h1></div><div class="swiper-slide" style="background-color: #F7B500;"><h1>Page 04</h1></div><div class="swiper-slide" style="background-color: #F96400;"><h1>Page 05</h1></div></div><!-- 如果不需要以下功能,注释即可 --><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev swiper-button-black"></div><div class="swiper-button-next swiper-button-black"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div>
</template>//js
//mounted里面调用
export default {components: {},setup() {return {// modules: [Pagination],};},methods: {},mounted() {var Myswiper = new Swiper(".swiper-container", {loop: true, // 循环模式选项slidesPerView: 3,centeredSlides: true,centeredSlidesBounds: true,// 自动轮播autoplay: {delay: 1300,stopOnLastSlide: false,disableOnInteraction: true,waitForTransition: false,pauseOnMouseEnter: true, // 鼠标悬停暂停轮播},// 翻转effect: 'coverflow',slidesPerView: 3,centeredSlides: true,coverflowEffect: {rotate: 30,stretch: 10,depth: 60,modifier: 2,slideShadows: true},// 如果需要分页器pagination: {el: ".swiper-pagination",clickable: true,},// 下一页,上一页navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 滚动条scrollbar: {el: ".swiper-scrollbar",hide: true,draggable: true, //是否可拖动条snapOnRelease: true, //false释放滚动条时slide不会自动贴合dragSize: 500,},});/*鼠标移入停止轮播,鼠标离开 继续轮播*/var container = document.getElementById('swiperContainer');container.onmouseover = function () {Myswiper.autoplay.stop();};container.onmouseout = function () {Myswiper.autoplay.start();}},//css
<style scoped lang="scss">
.swiper-container {position: relative;display: inline-block;width: 100%;height: 24rem;overflow: hidden;background-color: #ECECEC;--swiper-pagination-color: #ffbb00; // 分页器颜色/* 设置Swiper风格 */--swiper-theme-color: #ff6600;/* 单独设置按钮颜色 */--swiper-navigation-color: #00aaff;/* 设置按钮大小 */--swiper-navigation-size: 30px;h1 {color: #fff;position: relative;top: 40%;}.swiper-slide {img {width: 100%;height: 100%;}.bannerTitle {line-height: 2rem;width: 100%;position: absolute;height: 2rem;bottom: 0px;left: 10px;background: rgba(0, 0, 0, 0.5);color: rgba(255, 255, 255, 0.9);z-index: 9999;.titleC {width: 26rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}
}
</style>

上一篇文章, 

vue3+elementPlus:el-select选择器里添加按钮button_意初的博客-CSDN博客vue3+elementPlus:el-select选择器里添加按钮button,在el-select的option后面添加buttonhttps://blog.csdn.net/weixin_43928112/article/details/133681154

相关文章:

vue2踩坑之项目:Swiper轮播图使用

首先安装swiper插件 npm i swiper5 安装出现错误&#xff1a;npm ERR npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: vue/eslint-config-standard6.1.0 npm ERR! Found: eslint-plugin-vue8.7.1 npm ERR! node_modules/esl…...

python经典百题之分桃子

题目:海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子平均分为五份&#xff0c;多了一个&#xff0c;这只 猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分成五份&#xff0c;又多了 一个&#xff0c;它同样把多的一个扔入海中…...

vscode ssh linux C++ 程序调试

vscode调试c++程序相比vs2022要复杂很多,vs2022可以"一键运行调试",vscode则需要自己配置。 ​vscode调试程序时,会在当前工作目录产生.vscode 目录, 该目录有两个重要文件launch.json和tasks.json, 下面介绍两种调试方法: 手动调试和自动调试。 手动调试 不管…...

VUE和Angular有哪些区别?

Vue.js和Angular是两个流行的前端JavaScript框架&#xff0c;它们有一些明显的区别&#xff0c;包括以下几个方面&#xff1a; 1、语言和工具链的选择&#xff1a; Vue.js使用HTML、JavaScript和CSS来创建组件&#xff0c;使得它更容易学习&#xff0c;因为它使用了常见的Web…...

云原生边缘计算KubeEdge安装配置(二)

1. K8S集群部署&#xff0c;可以参考如下博客 请安装k8s集群&#xff0c;centos安装k8s集群 请安装k8s集群&#xff0c;ubuntu安装k8s集群 请安装kubeedge cloudcore centos安装K8S 2.安装kubEedge 2.1 编辑kube-proxy使用ipvs代理 kubectl edit configmaps kube-proxy -…...

SQL多表设计--一对多(外键)

-- 完成部门和员工的-- 选择当前db03 这个数据库use db03;-- 查看当前选中的数据库select database();-- 创建员工表create table tb_emp (id int unsigned primary key auto_increment comment ID,username varchar(20) not null unique comment 用户名,password varchar(32)…...

Stm32_标准库_9_TIM

频率(HZ)是频率的基本单位1HZ是1s的倒数 STM32F103C8T6一般情况给定时器的内部时钟都是72MHz&#xff08;系统主频率&#xff09; TIM基本构成 计数器、预分频器、自动化重装 // 都是16位其中计数器、自动化重装&#xff0c;都是16位换算成10进制范围为[0, 655536] 时间 1 /…...

283. 移动零

283. 移动零 原题 /** 左指针左边均为非零数&#xff1b; 右指针左边直到左指针处均为零。*/ class Solution {public void moveZeroes(int[] nums) {int left 0;int right 0;while(right<nums.length){if(nums[right]!0){swap(nums,left,right);left;}right;}}public v…...

用 HTTP 提交数据,基本就这 5 种方式

网页开发中&#xff0c;向服务端提交数据是一个基本功能&#xff0c;工作中会大量用 xhr/fetch 的 api 或者 axios 这种封装了一层的库来做。 可能大家都写过很多 http/https 相关的代码&#xff0c;但是又没有梳理下它们有哪几种呢&#xff1f; 其实通过 http/https 向服务端…...

基于matlab统计Excel文件一列数据中每个数字出现的频次和频率

一、需求描述 如上表所示&#xff0c;在excel文件中&#xff0c;有一列数&#xff0c;统计出该列数中&#xff0c;每个数出现的次数和频率。最后&#xff0c;将统计结果输出到新的excel文件中。 二、程序讲解 第一步&#xff1a;选择excel文件&#xff1b; [Filename, Pathn…...

近期分享学习心得3

1、全屏组件封装 先看之前大屏端的监控部分全屏代码 整块全屏代码 常规流是下面这种 //进入全屏 function full(ele) {//if (ele.requestFullscreen) {// ele.requestFullscreen();//} else if (ele.mozRequestFullScreen) {// ele.mozRequestFullScreen();//} el…...

前端uniapp如何修改下拉框uni-data-select下面的uni-icons插件自带的图片【修改uniapp自带源码图片/图标】

目录 未改前图片未改前源码未改前通过top和bottom 和修改后图片转在线base64大功告成最后 未改前图片 未改前源码 然后注释掉插件带的代码&#xff0c;下面要的 未改前通过top和bottom 和修改后 找到uni-icons源码插件里面样式 图片转在线base64 地址 https://the-x.cn/b…...

【计算机基础】Git系列3:常用操作

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…...

有哪些值得推荐的Java 练手项目?

大家好&#xff0c;我是 jonssonyan 我是一名 Java 后端程序员&#xff0c;偶尔也会写一写前端&#xff0c;主要的技术栈是 JavaSpringBootMySQLRedisVue.js&#xff0c;基于我学过的技术认真的对每个分享的项目进行鉴别&#xff0c;今天就和大家分享我曾经用来学习的开源项目…...

【Godot】时间线(技能)节点

4.1 游戏中一般都会有各种各样的技能&#xff0c;或者其他需要按一定的时间顺序去执行的功能。 这里我写出了一个时间线节点&#xff0c;就像是在播放动画一样&#xff0c;按一定的阶段去执行某些功能 # # Timeline # # - author: zhangxuetu # - datetime: 2023-09-24 23…...

每日练习-9

目录 1、井字棋 2、密码强度等级 3、二维数组中的查找 4.调整数组奇数偶数 5.旋转数组中的最小元素 6、替换空格 1、井字棋 解析&#xff1a;井字棋有四种情况表示当前玩家获胜&#xff0c;行全为1&#xff0c; 列全为1&#xff0c;主对角全为1&#xff0c; 副对角全为1。遍历…...

微信小程序 -- 页面间通信

前言 今天我们来说下微信小程序的页面间通信&#xff1a; 通过url传参实现页面间单向通信通过getCurrentPages()页面栈实现页面间单向通信通过EventChannel实现页面间双向通信 1、url传参 我们知道页面之间的跳转可以通过路由组件来实现&#xff0c;其中组件的属性url就是要…...

关于Jupyter markdown的使用

一级标题 #空格 标题1 二级标题 ## 空格 标题2 三级标题 ###空格 标题3 无序&#xff1b; 有序&#xff1a; 数学符号&#xff1a;...

【C语言】字符函数和内存操作函数

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解字符函数和内存操作函数&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一.字符函数1.1 字符分类函数1.2 字符转换函数 二.内存操作函数2.1 memcpy2.2…...

SpringBoot大文件上传实现分片、断点续传

大文件上传流程 客户端计算文件的哈希值&#xff0c;客户端将哈希值发送给服务端&#xff0c;服务端检查数据库或文件系统中是否已存在相同哈希值的文件&#xff0c;如果存在相同哈希值的文件&#xff0c;则返回秒传成功结果&#xff0c;如果不存在相同哈希值的文件&#xff0…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...