vue3 element-plus-admin中引入swiper使用

第一步:安装swiper

pnpm install swiper

第二步:在需要使用的页面上引入swiper组件

// 引入swiper组件import { Swiper, SwiperSlide } from 'swiper/vue';// 引入swiper样式import 'swiper/css';

注意:如果是js需要在页面中注册组件
js示例

export default {components: {Swiper,SwiperSlide,},setup() {const onSwiper = (swiper) => {console.log(swiper);};const onSlideChange = () => {console.log('slide change');};return {onSwiper,onSlideChange,};},};

ts示例 ts引入后直接使用即可

import { Swiper, SwiperSlide } from 'swiper/vue';const onSwiper = (swiper) => {console.log(swiper);
};
const onSlideChange = () => {console.log('slide change');
};

第三步:在页面中使用

 <swiper:slides-per-view="3":space-between="50"@swiper="onSwiper"@slideChange="onSlideChange"><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>...</swiper>

特别注意事项

一、
默认情况下,Swiper Vue 使用 Swiper 的核心版本(没有任何附加模块)。如果你想使用Navigation、Pagination等模块,你必须先安装它们:

以下是从以下位置导入的其他模块的列表swiper/modules:
//引入示例
import { Virtual } from 'swiper/modules';Virtual- 虚拟幻灯片模块
Keyboard- 键盘控制模块
Mousewheel- 鼠标滚轮控制模块
Navigation- 导航模块
Pagination- 分页模块
Scrollbar- 滚动条模块
Parallax- 视差模块
FreeMode- 自由模式模块
Grid- 网格模块
Manipulation- 幻灯片操作模块(仅适用于Core版本)
Zoom- 变焦模块
Controller- 控制器模块
A11y- 辅助功能模块
History- 历史导航模块
HashNavigation- 哈希导航模块
Autoplay- 自动播放模块
EffectFade- 淡入淡出效果模块
EffectCube- 立方体效果模块
EffectFlip- 翻转效果模块
EffectCoverflow- Coverflow效果模块
EffectCards- 卡牌效果模块
EffectCreative- 创意效果模块
Thumbs- 拇指模块

二、
navigation.nextEl请注意,如果您传递这些参数而不指定其元素(例如,不指定、pagination.el等),Swiper Vue 组件将为导航、分页和滚动条创建所需的元素。

三、
引入样式

Swiper 包包含不同的 CSS、Less 和 SCSS 样式集:

  • swiper/css- 仅核心 Swiper 样式
  • swiper/css/bundle- 所有 Swiper 样式,包括所有模块样式(如导航、分页等)

模块样式(如果您已经导入了包样式则不需要):

  • swiper/css/a11y- A11y模块所需的样式
  • swiper/css/autoplay- 自动播放模块所需的样式
  • swiper/css/controller- 控制器模块所需的样式
  • swiper/css/effect-cards- 卡牌效果模块所需的样式
  • swiper/css/effect-coverflow- Coverflow Effect 模块所需的样式
  • swiper/css/effect-creative- 创意效果模块所需的样式
  • swiper/css/effect-cube- 立方体效果模块所需的样式
  • swiper/css/effect-fade- 淡入淡出效果模块所需的样式
  • swiper/css/effect-flip- 翻转效果模块所需的样式
  • swiper/css/free-mode- 自由模式模块所需的样式
  • swiper/css/grid- 网格模块所需的样式
  • swiper/css/hash-navigation- 哈希导航模块所需的样式
  • swiper/css/history- 历史模块所需的样式
  • swiper/css/keyboard- 键盘模块所需的样式
  • swiper/css/manipulation- 操作模块所需的样式
  • swiper/css/mousewheel- 鼠标滚轮模块所需的样式
  • swiper/css/navigation- 导航模块所需的样式
  • swiper/css/pagination- 分页模块所需的样式
  • swiper/css/parallax- 视差模块所需的样式
  • swiper/css/scrollbar- 滚动条模块所需的样式
  • swiper/css/thumbs- Thumbs 模块所需的样式
  • swiper/css/virtual- 虚拟模块所需的样式
  • swiper/css/zoom- Zoom 模块所需的样式

对于 Less 样式,替换css为less导入路径,例如:

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

对于 SCSS 样式,替换css为scss导入路径,例如:

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

官网地址:
Swiper Vue.js 组件

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

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

相关文章

微信小程序 手机号授权登录

手机号授权登录 效果展示 这里面用的是 uni-app 官方的登录 他支持多端发布 https://zh.uniapp.dcloud.io/api/plugins/login.html#loginhttps://zh.uniapp.dcloud.io/api/plugins/login.html#login 下面是代码 <template><!-- 授权按钮 --><button v-if&quo…

java 推箱子

说明&#xff1a;刚入门的时候面试&#xff0c;有个老师傅说&#xff0c;你们喜欢打游戏&#xff0c;让你们写个简单的推箱子&#xff0c;能写出来就过 我说这多简单 结果说要用枚举类&#xff0c;数组来写 写得一踏糊涂&#xff0c;最后没通过 如今工作两年了&#xff0c;…

面试分享——Elasticsearch面试题

目录 1.Elasticsearch数据建模相关问题 1.1问题描述 1.2问题回答 2.Elasticsearch 查询和分析相关问题 2.1问题描述 2.2问题回答 3.Elasticsearch 集成与开发问题 3.1问题描述 3.2问题回答 4.Elasticsearch DSL 相关应用选型等问题 4.1问题描述 4.2问题回答 4.2.1…

Android OpenMAX(四)OMX Core

假设我们已经写好了所有的OMX组件,有vdec、venc、adec、aenc,接下来问题来了,我们应该如何管理这些组件呢(创建、销毁)?这一篇文章我们向上一层学习OMX Core提供的标准API。 OMX Core代码位于 OMX_Core.h OMX Core在OpenMAX IL架构中的位置位于IL Client与实际的OMX组件之…

Spring+Vue的卓越托管中心管理系统的设计与实现+PPT+论文+讲解+售后

相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低运营人员成本&#xff0c;实现了卓越托管中心管理系统的标准化、制度化、程序化的管理&#xff0c;有效地防止了卓越托管中心管理系统的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能…

Junit单元测试框架

Junit单元测试框架 功能 可以用来对方法进行测试&#xff0c;它是第三方公司开源出来的(很多开发工具已经集成了Junit框架&#xff0c;比如IDEA) 优点 可以灵活的编写测试代码&#xff0c;可以针对某个方法执行测试&#xff0c;也支持一键完成对全部方法的自动化测试&#…

DI-engine强化学习入门(十又二分之一)如何使用RNN——数据处理、隐藏状态、Burn-in

一、数据处理 用于训练 RNN 的 mini-batch 数据不同于通常的数据。 这些数据通常应按时间序列排列。 对于 DI-engine, 这个处理是在 collector 阶段完成的。 用户需要在配置文件中指定 learn_unroll_len 以确保序列数据的长度与算法匹配。 对于大多数情况&#xff0c; learn_un…

神经网络极简入门

神经网络是深度学习的基础&#xff0c;正是深度学习的兴起&#xff0c;让停滞不前的人工智能再一次的取得飞速的发展。 其实神经网络的理论由来已久&#xff0c;灵感来自仿生智能计算&#xff0c;只是以前限于硬件的计算能力&#xff0c;没有突出的表现&#xff0c;直至谷歌的A…

mysql workbench如何导出insert语句?

进行导出设置 导出的sql文件 CREATE DATABASE IF NOT EXISTS jeesite /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci */ /*!80016 DEFAULT ENCRYPTIONN */; USE jeesite; -- MySQL dump 10.13 Distrib 8.0.28, for Win64 (x86_64) -- -- Host: 127.0…

如何使用dockerfile文件将项目打包成镜像

要根据Dockerfile文件来打包一个Docker镜像&#xff0c;你需要遵循以下步骤。这里假设你已经安装了Docker环境。 1. 准备Dockerfile 确保你的Dockerfile文件已经准备就绪&#xff0c;并且位于你希望构建上下文的目录中。Dockerfile是一个文本文件&#xff0c;包含了用户可以调…

顺序表的实现(迈入数据结构的大门)(1)

什么是数据结构 数据结构是由&#xff1a;“数据”与“结构”两部分组成 数据与结构 数据&#xff1a;如我们所看见的广告、图片、视频等&#xff0c;常见的数值&#xff0c;教务系统里的&#xff08;姓名、性别、学号、学历等等&#xff09;&#xff1b; 结构&#xff1a;当…

线性表--数据结构设计与操作

单链表 1.单链表的定义&#xff1a; typedef struct LNode{Elemtype data;struct Lnode *next; }LNode ,*LinkList;//单链表的数据结构&#xff08;手写&#xff09; #include<iostream> #include<vector> #include<algorithm>typedef int TypeElem; //单链表…

OpenAI API搭建的智能家居助手;私密大型语言模型(LLM)聊天机器人;视频和音频文件的自动化识别和翻译工具

✨ 1: GPT Home 基于Raspberry Pi和OpenAI API搭建的智能家居助手 GPT Home是一个基于Raspberry Pi和OpenAI API搭建的智能家居助手&#xff0c;功能上类似于Google Nest Hub或Amazon Alexa。通过详细的设置指南和配件列表&#xff0c;用户可以自行组装和配置这个设备&#x…

Ansible自动运维工具之playbook

一.inventory主机清单 1.定义 Inventory支持对主机进行分组&#xff0c;每个组内可以定义多个主机&#xff0c;每个主机都可以定义在任何一个或多个主机组内。 2.变量 &#xff08;1&#xff09;主机变量 [webservers] 192.168.10.14 ansible_port22 ansible_userroot ans…

使用sqlmodel实现唯一性校验

代码&#xff1a; from sqlmodel import Field, Session, SQLModel, create_engine# 声明模型 class User(SQLModel, tableTrue):id: int | None Field(defaultNone, primary_keyTrue)# 不能为空&#xff0c;必须唯一name: str Field(nullableFalse, uniqueTrue)age: int | …

Flutter弹窗链-顺序弹出对话框

效果 前言 弹窗的顺序执行在App中是一个比较常见的应用场景。比如进入App首页&#xff0c;一系列的弹窗就会弹出。如果不做处理就会导致弹窗堆积的全部弹出&#xff0c;严重影响用户体验。 如果多个弹窗中又有判断逻辑&#xff0c;根据点击后需要弹出另一个弹窗&#xff0c;这…

大数据Scala教程从入门到精通第五篇:Scala环境搭建

一&#xff1a;安装步骤 1&#xff1a;scala安装 1&#xff1a;首先确保 JDK1.8 安装成功: 2&#xff1a;下载对应的 Scala 安装文件 scala-2.12.11.zip 3&#xff1a;解压 scala-2.12.11.zip 4&#xff1a;配置 Scala 的环境变量 在Windows上安装Scala_windows安装scala…

(delphi11最新学习资料) Object Pascal 学习笔记---第11章第1节 (Weak 和 Unsafe 类型接口引用)

11.1.4 Weak 和 Unsafe 类型接口引用 ​ 从 Delphi 10.1 Berlin 开始&#xff0c;Object Pascal 语言对接口引用的管理进行了优化。实际上&#xff0c;Object Pascal 语言提供了不同类型的引用&#xff1a; 常规引用在分配和释放时分别递增和递减对象引用计数&#xff0c;最终…

控制元素隐藏

一、隐藏元素 在CSS中&#xff0c;有几种方法可以隐藏元素&#xff0c;每种方法都有其特定的用例和效果。以下是一些常用的CSS属性和技巧&#xff0c;用于隐藏元素&#xff1a; display: none; 这是最常用的隐藏元素的方法。它会将元素完全从文档流中移除&#xff0c;元素不会…

docker搭建代码审计平台sonarqube

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、sonarqube流程四、快速搭建sonarqube五、sonarqube scanner的安装和使用 一、代码审计关注的质量指标 代码坏味道 代码规范技术债评估 bug和漏洞代码重复度单测与集成 测试用例数量覆盖率…