Swiper中文网：http://www.swiper.com.cn/

Swiper- 是免费的，最现代化的移动触摸滑块硬件加速的转换和惊人的天然行为。它的目的是在移动网站，移动网络应用和移动本地/混合应用程序中使用。设计主要是针对iOS，还对最新的Andr​​oid，Windows Phone的8和现代的桌面浏览器的伟大工程。

Swiper并非与所有平台兼容，它是一个现代化的触摸滑块，只集中的现代应用/平台带来最佳的体验和简单。

Swiper，与其他伟大的成分一起，是一部分Framework7 -构建iOS和Android应用的全功能框架。Swiper也是默认的滑块组件离子框架。

Swiper使用方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>

<html>

<head>

    ...

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

</head>

<body>

    ...

    <script src="path/to/swiper.min.js"></script>

</body>

</html>

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

<!DOCTYPE html>

<html>

<head>

    ...

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

</head>

<body>

    ...

    <script src="path/to/jquery.js"></script>

    <script src="path/to/swiper.jquery.min.js"></script>

</body>

</html>

2.HTML内容。

<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.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {

    width: 600px;

    height: 300px;

}

4.初始化Swiper：最好是挨着</body>标签

<script>

  var mySwiper = new Swiper ('.swiper-container', {

    direction: 'vertical',

    loop: true,

    // 如果需要分页器

    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮

    nextButton: '.swiper-button-next',

    prevButton: '.swiper-button-prev',

    // 如果需要滚动条

    scrollbar: '.swiper-scrollbar',

  })

  </script>

</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript">

window.onload = function() {

  ...

}

</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">

$(document).ready(function () {

 ...

})

</script>

轮播神器swiper插件的更多相关文章

  1. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  2. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  3. jQuery无缝循环开源多元素动画轮播jquery.slides插件

    详细内容请点击 初始化插件: 一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型$(".slideInner").slide({slideContainer: ...

  4. 微信小程序之 3d轮播（swiper来实现）

    以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...

  5. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  6. 小程序图片轮播特效swiper(纯手打)

    前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...

  7. 批发网加盟页面轮播Jquery jcarousellite插件效果

    Jquery jcarousellite 插件的好处 其中: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

  8. angularjs指令实现轮播图----swiper

    'use strict'; angular.module('app').directive('swipersLbt',swipers); swipers.$inject = ['$timeout']; ...

  9. 移动端图片轮播—swipe滑动插件

    swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class=' ...

随机推荐

  1. Android开发--仿微信语音对讲录音

    原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...

  2. 一般处理程序中使用session

    首先引用:using System.Web.SessionState;  再在 IHttpHandler 后面加逗号加IReadOnlySessionState:IHttpHandler,IReadO ...

  3. [Docker] docker 基础学习笔记5（共6篇）

    docker 配置文件的位置: centos : /etc/sysconfig/docker ubuntu: /etc/default/docker   现在比如我自己电脑上已经装好了docker,但 ...

  4. C# 获取本机CPU序列号，MAC地址，硬盘ID，本机IP地址，计算机名，物理内存，PC类型

    首先引入服务 然后 调用 本文转载自http://blog.sina.com.cn/s/blog_7eeb43210101hf7f.html public class Computer { publi ...

  5. Java垃圾回收机制 入门

    对于Java虚拟机的了解,我认为是一个Java程序员已经入门的重要标志,而JVM中的垃圾回收机制(Garbage Collection,简称GC)又是JVM中的重点,所以hans在这里用篇文章时间和大 ...

  6. camstar --设备保养

  7. centos安装python

    安装Development tools yum groups install -y 'development tools' yum install -y zlib-dev openssl-devel ...

  8. Shell 去掉文本中的空格

    使用sed命令 将文件'aol1'中的空格去掉然后输出到'tmpFile'文件中 sed s/[[:space:]]//g aol1 > tmpFile

  9. HDU1075

    题目大意: 给你一本火星词典,每个火星单词对应一个英文单词. 然后给你一篇火星文章,要求你翻译成英文. 要求如下: 如果这个火星单词用英文单词可以表示,就翻译成英文,如果没有这个单词,就原样输出.遇到 ...

  10. （转载）AppScan使用分享

    转载:http://www.cnblogs.com/fnng/archive/2012/10/09/2717568.html 这里主要分享如何使用AppScan对一大项目的部分功能进行安全扫描. -- ...