swiper的使用教程

今天要分享的是swiper这个插件的使用，什么是swiper呢？

Swiper常用于移动端网站的内容触摸滑动；
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

初学者使用swiper的时候，可以在官网（http://www.swiper.com.cn/）学，但是一开始的时候，建议不要直接看它的API文档。可以在先下载swiper，选择swiper-3.4.2完整压缩包下载，然后可以看它里面demos中的效果，你需要哪个效果，就用哪个！

使用方法（以其中demos中第21个效果为例）：

1、引用JS和css文件

[html] view plaincopy

<link rel="stylesheet" href="path/to/swiper.min.css">
<script src="path/to/swiper.min.js"></script>

2、在body中加入以下格式的HTML格式

[html] view plaincopy

<div class="swiper-container">
<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>
导航等组件可以放在container之外

3、在script中加入以下js代码

[html] view plaincopy

<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>

4、在head中加入css样式

[html] view plaincopy

<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-container {
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;
}
</style>

至此就完成了一个简单的轮播，然后还有先script中要加的参数，我们可以在API文档中进行查阅，并添加。

注意的是：HTML中class的名字不能换，不要问为什么，就是那样用就OK了！

原创来自：http://blog.csdn.net/cq7421/article/details/77937080

swiper的使用教程相关推荐

html5 swiper 菜鸟,前端插件swiper使用新手教程
1.引入swiper.min.js和swiper.min.css两个文件,文件百度网盘下载地址链接:https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw 提取 ...
前端插件swiper使用新手教程
1.引入swiper.min.js和swiper.min.css两个文件,文件百度网盘下载地址链接:https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw 提取 ...
vue3中使用swiper完整版教程
介绍在 vue3 中使用 swiper, 实现轮播图的效果:如果组件样式等模块引入不当,很有可能导致,页面无效果:或者想要的箭头或者切换效果异常问题.具体使用方式如下所示: 使用方式使用命令 np ...
swiper组件如何自定义分页符和前进后退按钮
前提今天产品提了这样一个需求:用户在首次登录后,要展示一个引流的轮播图,其内容主要是对新功能的图文说明(类似于王者荣耀每次更新时的内容一览轮播图,如下图所示).如果非首次登录,则让它隐藏掉即可.注: ...
Swiper插件下载及使用教程
首先附上官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 1. 进入官网,进入使用方法的页面: 2.下载插件压缩包: 下载方法一:点击"Swiper文件"下载插 ...
php图片轮换功能,微信小程swiper组件实现图片轮播切换功能教程
本文主要介绍了微信小程使用swiper组件实现图片轮播切换显示功能,涉及swiper组件相关属性使用技巧,希望能帮助到大家. 1.效果展示 2.关键代码 index.wxml: swiper组件属性说 ...
Vue2系列教程——Swiper插件的使用
Vue2 Swiper插件的使用安装swiper 6.7.1 npm install swiper@6.7.1 --save npm install vue-awesome-swiper --sav ...
Swiper 在网页开发中运用——简易教程
Swper 初级使用 1导入两个文件在head部分 <script src="js/swiper/swiper.min.js"></script><l ...
微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程
1.swiper组件是干嘛的? 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 2.swiper和swiper-itme怎么使用? 接下来我尝试教大家怎么使用swipe ...

swiper的使用教程

swiper的使用教程相关推荐

最新文章

热门文章