一起来了解下Swiper插件的使用和介绍
目录
- Swiper介绍
- swiper的使用
- 代码实现
- 总结
Swiper介绍
swiper是一款开源的解决前端开发中触摸滑动案例的插件
swiper的使用
使用swiper首先要下载swiper
下载完成后在官网在线演示中找到你所需要的
这里我选择了基础演示中的010
首先在你下载的压缩包中找到010的demo文件
打开后点击鼠标右键打开网页源代码
打开编辑器在自己项目中引入swiper.min.css swiper-bundle.min.js 两个文件
复制打开的网页源代码中的结构html 样式css以及js代码
最后就可以使用swiper插件
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
<!-- Swiper JS -->
<script src='js/swiper-bundle.min.js'></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {});
</script>
</body>
</html>
最后如果想改变Swiper插件的API可以阅读API文档，然后结合项目更改
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
相关推荐
-
vue使用swiper插件实现轮播图的示例
hello大家好,最近我在做一个仿饿了么的项目,我会将我的项目经验同步到这里,与大家分享! vue - 使用swiper插件实现轮播图 下载安装: npm install swiper --save Msite.vue的HTML部分: <!--在页面msite_nav导航部分使用swiper--> <div class="swiper-container"> <div class="swiper-wrapper"> <div
-
vue-awesome-swiper滑块插件使用方法详解
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 github地址: https://github.com/surmon-china/vue-awesome-swiper.git 1.进入项目目录,安装swiper npm install vue-awesome-swiper --save 2.引入资源 //vue滑块 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwi
-
vue引入swiper插件的使用实例
本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助 步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目,最主要的就是下面的步骤 步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下. 步骤四: 安装run
-
解决vue中使用swiper插件问题及swiper在vue中的用法
Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas
-
react-native封装插件swiper的使用方法
首先创建简单的react-native项目,创建一个文件夹.然后用命令符输入 react-native init swiper 创建完成之后开发项目,我用的vs 打开控制台,安装swiper依赖. 安装:npm i react-native-swiper --save 查看:npm view react-native-swiper 删除:npm rm react-native-swiper --save 这里还需要 npm i 下更新下本地的依赖库 启动app项目 ios: react-nati
-
解决Angular.js中使用Swiper插件不能滑动的问题
我们都知道swiper是交互体验十分好的轮播插件 但是通过angular(ng-repeat)循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行: html <div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div class="swiper-sli
-
解决vue中使用swiper 插件出错的问题
由于我自己在写一个demo时候用到了该插件,出现了一些问题,所以就简单查了一下该插件的用法以及一些常见的错误 1.出现Get .../maps/swiper.min.js.map 500(Internal Server Error) 使用min版本时缺少Source Map文件 1. 禁止Source Map提示,删除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可 2. 如需要使用Source Map,完整包里面有该文件s
-
一起来了解下Swiper插件的使用和介绍
目录 Swiper介绍 swiper的使用 代码实现 总结 Swiper介绍 swiper是一款开源的解决前端开发中触摸滑动案例的插件 swiper官网: swiper的使用 使用swiper首先要下载swiper 下载完成后在官网在线演示中找到你所需要的 这里我选择了基础演示中的010 首先在你下载的压缩包中找到010的demo文件 打开后点击鼠标右键打开网页源代码 打开编辑器在自己项目中引入swiper.min.css swiper-bundle.min.js 两个文件 复制
-
jQuery多级联动下拉插件chained用法示例
本文实例讲述了jQuery多级联动下拉插件chained用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
swiper插件自定义切换箭头按钮
不知道大家在使用swiper时有没有遇到这样一种需求,swiper插件自定义切换箭头按钮,话不多说,直接上gif. 也就是需要把左右切换的箭头移到容器的外面,自定义箭头的样式. 给swiper容器再加一个父容器,两个容器之间留下间隙,箭头定位到间隙之间就ok了. 箭头默认是绝对定位的,给父容器一个相对定位,就能够调整箭头位置.此外箭头用的是背景图,改变箭头大小的同时记得改变背景图大小.上代码. css: <style> .out_container{ width: 280px; height:
-
vue项目中导入swiper插件的方法
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件
-
Intellij 下 mybatis 插件 MyBatisCodeHelperPro破解步骤详解
步骤1.破解包下载地址:https://gitee.com/pengzhile/MyBatisCodeHelper-Pro-Crack/releases 步骤2.下载:Intellij IDEA plugins 搜索安装:MyBatisCodeHelperPro(会要求输入key激活使用收费版功能,暂时忽略)重启IDEA: 步骤三破解: 下载完成后,进入Intellij IDEA plugins 从硬盘安装步骤一中下载的MybatisCodeHelperNew-2.5-IDEA173-IDEA1