vue3中使用swiper完整版教程

介绍

在 vue3 中使用 swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：

使用方式

使用命令 npm install swiper 安装 swiper插件；
在main.js里使用样式文件，如下所示：

import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

在使用的页面，引入需要使用到的组件，比如常用的左右切换箭头，小圆点指示器等；如下所示：

import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'const navigation = ref({nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {// console.log('上一张' + index + item)
};
const nextEl = () => {// console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndexconsole.log(swiper.activeIndex)
}

在页面中使用组件和相关的模块

<swiper:modules="modules":loop="true":slides-per-view="1":space-between="50":autoplay="{ delay: 4000, disableOnInteraction: false }":navigation="navigation":pagination="{ clickable: true }":scrollbar="{ draggable: false }"class="swiperBox"@slideChange="onSlideChange"
><swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide><div class="swiper-button-prev" @click.stop="prevEl(item, index)" /><!--左箭头。如果放置在swiper外面，需要自定义样式。--><div class="swiper-button-next" @click.stop="nextEl" /><!--右箭头。如果放置在swiper外面，需要自定义样式。--><!-- 如果需要滚动条 --><!-- <div class="swiper-scrollbar"></div> -->
</swiper>

参数介绍：
modules：
loop：是否循环播放
slides-per-view：控制一次显示几张轮播图
space-between：每张轮播图之间的距离，该属性不可以和margin 属性同时使用；
autoplay：是否自动轮播， delay为间隔的毫秒数；disableOnInteraction属性默认是true，也就是当用户手动滑动后禁用自动播放，设置为false后，将不会禁用，会每次手动触发后再重新启动自动播放。
navigation：定义左右切换箭头
pagination：控制是否可以点击圆点指示器切换轮播
scrollbar：是否显示轮播图的滚动条， draggable设置为 true就可以拖动底部的滚动条（轮播当中，一般不怎么会使用到这个属性）

vue3中使用swiper完整版教程相关推荐

把计算机信息传到电视屏的方法,如何将电脑内容投屏到电视上？当贝市场完整版教程...
如何将电脑内容投屏到电视上?当贝市场完整版教程 2019年08月27日 12:50作者:黄页编辑:黄页分享很多朋友都试过将手机内容投屏到电视上,但鲜少有用户知道电脑上的内容如何投屏到电视上.今天当 ...
mysql下载与安装教程5.7_安装mysql 5.7 最完整版教程
安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo ...
AI虚拟主播数字人技术实现Wav2Lip【附完整版教程】及【效果评测】
前言建议直接阅读飞书文档:Docshttps://yv2c3kamh3y.feishu.cn/docx/S5AldFeZUoMpU5x8JAuctgPsnfg 近期很多饱子私信,想知道关于AI数字人 ...
ubuntu18.04配置ORB-SLAM3（包含ROS）完整版教程
ORB_SLAM3安装教程 ORB_SLAM3安装准备 1.C++11 or C++0x Compiler 2.Pangolin ==**出现的问题**== 3.OpenCV安装 4.Eigen安装 ...
直播攻略：网易视频云送上OBS直播完整版教程
OBS是什么? OBS是一款直播串流软件,中文无广告,完全免费,含32位与64位版本,通吃各种电脑,支持MAC的OS X系统. 各大平台都有自己的直播软件了还需要用OBS么? 因为,当前平台直播软件存 ...
超写实虚拟数字人再升级：Wav2Lip-GFPGAN完整版教程及效果视频评测【手把手】
一.项目介绍在前面的一篇数字人文章中,我们介绍了AI主播虚拟人技术中的一项重要技术--Wav2Lip,并附上了完整版教程和效果评测,具体可见AI数字人虚拟主播技术实现Wav2Lip及效果演示评测[附 ...
Python从入门到精通全套完整版教程（懂中文就能学会）
兄弟!毫无套路!!! Python从入门到精通全套完整版教程(懂中文就能学会) 福利分享: 本套视频一共400集,共分4季第一季 Python基础第二季 Python深入和扩展第三季网络编程. ...
centos 6.6 mysql5.7_CentOS 6.5/6.6 安装（install）mysql 5.7 最完整版教程-Go语言中文社区...
CentOS 6.5/6.6 安装(install)mysql 5.7 最完整版教程 Step1: 检测系统是否自带安装mysql [root@Ting ~]# yum list installe ...
VMware虚拟机去虚拟化完整版教程|永久过强壳VMP、SE壳、GK盾、TMD教程|VMware去虚拟化吾爱汇编论坛教程完整版
VMware去虚拟化完整版教程|永久过强壳VMP.SE壳.GK盾.TMD|VMware去虚拟化吾爱汇编论坛教程完整版教程内容: 实际效果:

vue3中使用swiper完整版教程

介绍

使用方式

vue3中使用swiper完整版教程相关推荐

最新文章

热门文章