Swiper的安装及使用

什么是Swiper

Swiper（swiper master）是一个第三方的库，可以用来实现移动端、pc端的滑动操作，十分方便（官方文档Swiper中文网-轮播图幻灯片js插件,H5页面前端开发）。

为什么大家都喜欢使用Swiper

免费，开源，稳定，应用广泛，文档丰富，大量活跃用户解答疑问，swiper应用广泛，使用频率仅次于jquery, 轮播图类排名第一，是网页设计师必备技能，众多耳熟能详的品牌在使用：阿里、腾讯、百度、拼多多、网易、华为、格力、喜茶、顺丰等，大量demo即下即用，前端新手亦可快捷做出精美效果。简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等。

那么如何在vue中使用swiper

1. 下载Swiper

首先使用npm或者cnpm下载swiper

cnpm install swiper //我下载的是8.0版本的(npm install swiper@8.0.1)

2. 引入Swiper

// 可以直接在组件里引入这个文件
import Swiper from 'swiper/swiper-bundle.min.js';//一定要引入css
import 'swiper/swiper-bundle.min.css';

3. 使用Swiper ,需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同的swiper版本用到的文件名略有不同，可下载swiper文件或使用CDN。添加HTML内容，Swiper7的默认容器是'.swiper', Swiper6之前是'.swiper-container'

<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要使用分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条--><div class="swiper-scrollbar"></div>
</div>

4. mounted里面调用

mounted() {new Swiper('.swiper', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination'},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',pervEl: '.swiper-button-prev'   },// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar'}})}

注意：如果想要从后台请求图片放上去new Swiper要写在网络请求成功的函数里面，否则不会出来数据

Swiper的安装及使用相关推荐

Vue框架里使用Swiper - 安装篇
Vue框架里使用Swiper npm安装swiper cnpm install swiper 相关阅读 Vue框架里使用Swiper 如何在Vue项目中优雅的使用swiper插件 https://ww ...
江在川上曰：vue中使用swiper
vue中使用swiper 1 安装 //这是swiper组件 npm install vue-awesome-swiper --save-dev //这是swiper组件的依赖包 npm instal ...
react 中使用swiper
本文是官网翻译:Swiper React Components 配置项含义可参考 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发安装 Swiper React 只能够通过 ...
vue-cli使用swiper4在ie以及safari报错
vue-cli项目中,通过npm run swiper --save-dev安装的是swiper4版本的插件,这样安装以后在谷歌火狐等浏览器都可以正常运行,但是在safari浏览器(可能是版本太低)还 ...
ionic3.0--angular4.0 引入第三方插件库的方法
ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings 2.搜索你 ...
从零开始搭建react项目（一）
自学react有一段时间了,官网文档基础的看了一遍,然后便把之前公司做的一个vue项目用react搭建了下,顺便整理下一些知识点. 项目大概效果: 一.利用create-react-app搭建项目 1 ...
孟郎诗词网3.0版本问题总结
孟郎诗词3.0版本问题总结一.ElasticSearch 1. ES报错java.lang.RuntimeException: can not run elasticsearch as root 2 ...
在线教育项目技术笔记2
文章目录一.对象存储OSS 1.阿里云OSS控制台使用 2.阿里云OSS开发准备 3.实现代码上传文件到阿里云OSS 二.nginx 1.nginx的启动安装 2.nginx配置项目请求转发三.e ...
vue电商项目(二)——完成Home页面
目录一.项目开发逻辑二.拆分搭建Home页面组件 1.注册使用三级联动TypeNav组件(全局组件) (1)注册全局组件 (2)使用全局组件 2.完成Home其余静态组件 (1)静态组件文件夹较少 ...
vue 卡片轮播中间大两边小复制代码就可使用
vue开发中遇到类似原生这种卡片轮播,中间大两边小的需求网上搜了下,很多都是修改前一个和后一个的高度,然后设置了margin-top,但个人感觉这样病不能保证很好的居中,在研究了官网的demo后,发 ...

Swiper的安装及使用

Swiper的安装及使用相关推荐

最新文章

热门文章