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.mfbz.cn/a/597787.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu上使用audit2allow解决Android Selinux问题

1.安装工具 sudo apt install policycoreutils 2.运行命令 提前用dmesg或者串口抓取kernel log 遇到错误&#xff0c;提示需要用-p指定policy file&#xff0c;然偶尝试创建一个policy空文件&#xff0c;用-p选项&#xff0c;遇到如下错误 3.规避问题 首先跟进错误log的堆栈…

面试集中营—Spring篇

Spring 框架的好处 1、轻量&#xff1a;spring是轻量的&#xff0c;基本的版本大约2MB&#xff1b; 2、IOC&#xff1a;控制反转&#xff0c;Spring的IOC机制使得对象之间的依赖不再需要我们自己来控制了&#xff0c;而是由容易来控制&#xff0c;一个字&#xff1a;爽&#xf…

leetcode-有重复数字的全排列-98

题目要求 思路 1.同【没有重复项的全排列-97】这个题一样&#xff0c;都是递归的题&#xff0c;区别在于这个可能会包含重复的数字&#xff0c;因此&#xff0c;不能只是简单的通过两个值是否相等然后用标志位标记&#xff0c;而是新增了一个数组&#xff0c;这个数组专门用于…

libevent的使用

文章目录 libevent封装的框架思想常用函数分析使用fifo的读写未决和非未决bufferevent特性bufferevent函数客户端和服务器连接和监听libevent实现socket通信 libevent封装的框架思想 libevent框架&#xff1a;1. 创建 event_base (乐高底座)2. 创建 事件evnet 3. 将事件 添加…

【C++练级之路】【Lv.20】位图和布隆过滤器(揭开大数据背后的神秘面纱)

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、位图1.1 位图的概念1.2 位图的优势1.3 位图的模拟实现1.3.1 成员变量与默认成员函数1.3.2 test1.3.3…

AI智能分析视频监控行业的发展趋势和市场发展浅析

监控视频AI智能分析技术的现状呈现出蓬勃发展的态势&#xff0c;这一技术源于计算机视觉和人工智能的研究&#xff0c;旨在将图像与事件描述之间建立映射关系&#xff0c;使计算机能够从视频图像中分辨出目标信息。 在技术上&#xff0c;监控视频AI智能分析技术已经实现了对视…

Jenkins 2.164.3 安装插件(当前官网正式版本: 2.440.3 LTS)

Jenkins 2.164.3安装插件 1. 安装jenkins1.1 宿主机安装1.2 docker安装(linux) 2. 登录jenkins3. 修改配置文件 这篇文章如果放在5、6年前写出来毫无意义&#xff0c;因为安装2.164.3之后&#xff0c;推荐的插件即可自动安装。但是在2024年&#xff0c;当前正式版本是2.440.3 L…

【论文阅读】 Loss Functions for Image Restoration with Neural Networks

Loss Functions for Image Restoration with Neural Networks 论文地址摘要I. 引言II 相关工作用于图像恢复的神经网络B 找到更好的解决方案。 三、图像恢复的损失层A. l1 错误 The l1 ErrorB. SSIMC. MS-SSIMD. The Best of Both Worlds: MS-SSIM L1 四、结果A. Joint Denois…

四化智造MES(WEB)对接打通金蝶云星空余料入库查询(入库记录查询)接口与生产退料单新增接口

四化智造MES&#xff08;WEB&#xff09;对接打通金蝶云星空余料入库查询&#xff08;入库记录查询&#xff09;接口与生产退料单新增接口 接通系统&#xff1a;四化智造MES&#xff08;WEB&#xff09; “MES助力智能制造过程控制:MES管理生产订单的整个生产流程,通过对生产过…

npm install 及使用cordova打包常见错误大全(附解决方案)

问题1、cb() 这是我们在install过程中最最常见问题&#xff0c;网络上的解决方式也都是大同小异&#xff0c;要么就是升级node(误人子弟)&#xff0c;项目里的node是不可以随意升级的&#xff0c;它有可能会导致其他依赖又不适配&#xff0c;起始很多时候就是由于咱们配置的镜像…

Linux基础之git与调试工具gdb

目录 一、git的简单介绍和使用方法 1.1 git的介绍 1.2 git的使用方法 1.2.1 三板斧之git add 1.2.2 三板斧之git commit 1.2.3 三板斧之git push 二、gdb的介绍和一些基本使用方法 2.1 背景介绍 2.2 基本的使用方法 一、git的简单介绍和使用方法 1.1 git的介绍 Git是一…

记录一下3月底到4月的前端开发工程师面经

文章会持续更新 1.https 原理&#xff08;加密 证书&#xff09; 客户端使用https的url访问web服务器&#xff0c;要求与服务器建立ssl连接web服务器收到客户端请求后&#xff0c;会将网站的证书&#xff08;包含公钥&#xff09;传送一份给客户端客户端收到网站证书后会检查证…

学术咸鱼入门指南(2)

巧用思维导图阅读文献 化整为零&#xff1a;读文献&#xff0c;从拆分文章的结构开始 大家在初步接触自己学科的论文时&#xff0c;要了解清楚基本的范式&#xff0c;日后读起来就比较顺了。 科研论文的第一部分&#xff0c;是文章的标题&#xff0c;摘要和关键词&#xff0…

HNU-人工智能-作业1

人工智能-作业1 计科210x 甘晴void 第1题 考虑一个实时的在线电话翻译系统&#xff0c;该系统实现英语与日语之间的实时在线翻译&#xff0c;讨论该系统的性能度量&#xff0c;环境&#xff0c;执行器&#xff0c;感知器&#xff0c;并对该环境的属性进行分析。&#xff08;10…

革新品质检测,质构科技重塑肉类行业新篇章

革新品质检测&#xff0c;质构科技重塑肉类行业新篇章 在现代社会&#xff0c;消费者对食品安全和品质的要求日益提升&#xff0c;特别是在肉类行业。为了满足这一市场需求&#xff0c;质构科技凭借其精准、高效的优势&#xff0c;正逐渐成为肉类品质检测的新星。今天&#xf…

网络安全的未来:挑战、策略与创新

引言&#xff1a; 在数字化时代&#xff0c;网络安全已成为个人和企业不可忽视的议题。随着网络攻击的日益频繁和复杂化&#xff0c;如何有效保护数据和隐私成为了一个全球性的挑战。 一、网络安全的现状与挑战 网络安全面临的挑战多种多样&#xff0c;包括但不限于恶意软件、…

iPhone查看本机号码只需要这3招,不再为号码忘记犯愁!

在日常生活中&#xff0c;我们经常需要使用手机号码进行各种通讯活动&#xff0c;但有时候会忘记自己的手机号码&#xff0c;让人感到非常尴尬。不过&#xff0c;如果您是iPhone用户&#xff0c;那么您可以放心了&#xff01;因为在iphone查看本机号码只需要简单的几个步骤&…

ShardingSphere 5.x 系列【27】 数据分片原理之 SQL 改写

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 概述2. 正确性改写2.1 标识符改写2.1.1 表名称2.1.2 索引名称2.1.3 Schem…

618好物节不知道买什么?快收下这份好物推荐指南!

随着618好物节的临近&#xff0c;你是否在为选择什么产品而犹豫不决&#xff1f;不用担忧&#xff0c;我精心准备了一份购物指南&#xff0c;旨在帮助你发现那些性价比高、口碑爆棚的商品。无论是科技新品还是生活小物件&#xff0c;这份指南都能帮你快速定位到那些值得投资的好…

若依前后端分离部署nginx

1、v.sj 2、生产环境修改 3、退出登录修改 4、路由改为hash模式 5、nginx配置 location /gldhtml/ {alias D:/java/tool/nginx-1.19.6/project/jxal/html/; } location /jxal/ {proxy_pass http://localhost:8081/; }
最新文章