vue3中 使用 swiper 插件,自定义切换按钮, 将 前进后退 、左右切换 按钮放到容器外部

今天在使用 swiper 时,遇到一个 坑爹的 问题。

swiper 组件的本来样式长这样:
在这里插入图片描述
左右切换的按钮在滑动容器内部,但是我们想要它跑到容器外面去。
在这里插入图片描述

网上找了一堆方法都不好使
也不知道是不是因为 我使用的是 高版本原因

最终实验结果:

给swiper组件外面包上一层div、并设置其 position: relative; padding: 0 50px; 样式,再去除 swiper-container 本身 position,就可以了。

代码:
在这里插入图片描述
在这里插入图片描述

我保证,这是最简单的方法,网上包括官网说的各种方法都比较麻烦,还不好用!!!!!

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

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

相关文章

一眼看尽5G江湖,Gartner发布5G网络基础设施魔力象限报告

作者 | 白告天来源 | 边缘计算社区头图 | 下载于视觉中国近日,国际权威分析机构Gartner发布了首份《通信运营商5G网络基础设施魔力象限》报告。以最直观的方式展示了这一领域内各家头部企业的力量对比情况。Gartner通信运营商5G网络基础设施魔力象限该魔力象限帮助通…

一篇小文带你走进RabbitMQ的世界

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 说到消息中间件,大部分人的第一印象可能是Kafka。毕竟Kafka自问世以来,就顶着高并发,大流…

nginx高可用方案:keepalived+nginx vip 动态位移

文章目录一、部署总览常用命令1. 部署总览2. 常用命令二、软件安装配置2.1. 安装keepalived2.2. 安装nginx2.3. 配置静态文件三、测试3.1. 启动nginx3.2. 验证四、vip动态位移测试4.1. 140验证4.2. 141验证4.3. 140停止kp服务4.4. 141 验证4.5. 140 重新启动kp服务一、部署总览…

多角度分析平台即服务?PaaS的类型和用例

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 没有适合所有人的单一PaaS。即使云计算已经发展了10多年,但对云计算服务模型的定义仍然相当模糊。通常&#xff0…

未来,边缘计算的功能支柱是 Kubernetes

来源 | SDNLAB责编 | 寇雪芹头图 | 下载于视觉中国编者按在数字化转型时代,5G网络是一个飞跃。5G正在推动边缘计算的发展,而Kubernetes则是5G与边缘计算之间的粘合剂。云计算的十年云计算之于信息技术(IT)产业,就像石油之于汽车工业一样。云让…

如何在工作中快速成长?致工程师的10个技巧

云栖号资讯:【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来! 作者 | 江建明 阿里巴巴高级无线开发专家 导读:精英人数的增长速度持续加快后,很多人开始焦虑&#…

在新项目中使用 Vue3 使用总结

一、使用背景 最近公司需要搭建一个新项目,用于做官网。因为作为官网,首先项目不算大,一共只有十来个页面,并且想要用户体验感很好,所以最终选定以 Vue 作为技术栈。 虽然 Vue3 (中文官网)刚问…

2020年从架构谈起到Mesh结束

作者 | 张羽辰(同昭)阿里云交付专家 导读:如今,几乎所有的事情都离不开软件,当你开车时,脚踩上油门,实际上是车载计算机通过力度感应等计算输出功率,最终来控制油门,你从…

Mendix:低代码平台四大常见用例开发

编辑 | 宋慧 供稿 | Mendix 头图 | 付费下载于视觉中国 如今,低代码对很多人来讲可能已经不再是一个陌生的名词。创新的低代码开发平台实现了低级别编码的抽象化和人工流程的自动化。低代码通过可视化开发工具和可重用组件,缩短了定制化网络和移动应用的…

下架已上线的小程序;2.设置不允许被用户搜索到

下架已上线的小程序: 登录微信开发者后台【设置】-【功能设置】-【暂停服务设置】-【暂停服务】,如图 设置小程序不允许被用户搜索到: 登录微信开发者后台【设置】-【功能设置】-【隐私设置】-【关闭】,如图 操作过程中遇到的问题…

5G新基建边缘计算乘风破浪

2019年6月6日,工信部向中国电信、中国移动、中国联通、中国广电发放5G商用牌照,这意味着中国正式进入5G元年。一年以来,随着基站的建设与用户认知的提升,5G应用如雨后春笋般涌现。而在今年上半年频繁被提及的“新基建”中&#xf…

那些年,我在阿里当数据开发

前言: -更多关于数智化转型、数据中台内容请加入阿里云数据中台交流群—数智俱乐部 (文末扫描二维码或点此加入) -阿里云数据中台官网 https://dp.alibaba.com/index (作者:数据从业者 ) 我是阿里数据部…

太白金星:我很关心分布式 Quorum NWR

来源 | 悟空聊架构责编 | 寇雪芹头图 | 下载于视觉中国先来看一段神秘的对话:太白金星:听闻老君最近在练神丹妙药,可否与我一讲?太上老君:老白啊,我最近在练六颗丹药:两颗延年丹、两颗健步丹、两…

mPaaS小程序技术架构深度解析

⚅ 点击观看《mPaaS 小程序新品发布会》回放 > > 随着小程序技术的愈发成熟,不同平台的优势和典型使用场景各有侧重,同时越来越多的开发者可以结合自身的业务特色,通过小程序作为业务载体,形成单一平台或多平台的协同关系。…

从javaScript数据类型开始了解垃圾回收机制

一、 javaScript数据类型 javaScript 数据类型分为:基本数据类型、引用数据类型 基本数据类型 分类:Number、String、Boolean、Null、Undefined、Symbol。 存储地址:栈。 引用数据类型 分类:Object、Array、Function。 存储地…

直播中那几秒延时到底来自哪?

7月16日,亚太内容分发大会上,阿里云高级产品运营专家俞翔受邀出席,并分享了基于CDN网络构建超低延时直播的场景实践。以下为演讲原文。 近几年,直播带货已经逐渐走进大众视野。在今年上半年受疫情原因影响,直播营销市…

三探云原生全景图,这次聊聊运行时层

在《俯瞰云原生,这便是供应层》我们介绍了云原生全景图的最底层:供应层,本文将带大家了解运行时层,这一层包含了容器在云原生环境中运行所需的一切。作者 | Catherine Paganini,Jason Morgan来源 | K8sMeetup社区头图 …

SpringCloud应用在Kubernetes上的最佳实践—开发部署

作者 | 孤弋 阿里云高级技术专家,负责 EDAS 的开发和用户体验优化工作。 导读:在上一篇文章《SpringCloud 应用在 Kubernetes 上的云上实践 - 开发篇》中讲到可以通过两个工具,轻松地将一个 SpringCloud 应用从初始化到本地运行。本篇文章&a…