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. 今天使用bootstrap中的tagsinput控件，碰到个小问题

    我直接使用时,后台一直报Uncaught Can't add objects when itemValue option is not set错误, 代码如下: <div> <inp ...

  2. 解决git无法clone提示443以及配置git代理方法

    git config --global http.proxy 'socks5://127.0.0.1:1080' 设置完成之后再次clone就会成功了(当然前提是你有s's而且在开启的前提下)

  3. shll 变量

    name=zhagnsan age=11 echo $ name $age 赋值号两边没有任何空格.当想取shell变量的值时,需要在变量名前加上$字符,当所赋的值中间含有空格时,要加上引号 函数: ...

  4. Volley-XUtils-OkHttp三种方式实现单张多张图片上传

    OkHttp可以作为Volley底层传输协议,速度更快,传大量图片建议使用.OkHttp更多功能请看OkHttp的使用 xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更 ...

  5. ios第三方库和工具类

    下面的是使用苹果电脑后,自己的一下积累吧.有好用的第三方库和工具,肯定会第一时间和大家分享的. 自己平时写的一些分类和工具库 SSTools已经在github上面开始更新了,欢迎大家来指正和补充 一. ...

  6. nginx php rewrite配置

    server { listen 80; server_name xxx.cn www.xxx.cn; index index.html index.htm index.php; root /data/ ...

  7. 自动生成查找组件的lua代码

    本篇主要解决的问题是使用lua脚本编写unity业务逻辑时,自动生成一些查找组件及绑定控件事件的lua代码! 现在很多unity项目都是用ulua作为热更新解决方案,因此需要用lua来写相关的逻辑,经 ...

  8. ROS 新手教程 命令汇总

    ## 工作环境搭建 查看环境变量的配置: wangsan@wangsan-Y50:~$ export | grep ROS declare -x ROSLISP_PACKAGE_DIRECTORIES ...

  9. iconv将文件编码从gb2312 转换为utf-8

    iconv命令用于转换指定文件的编码,默认输出到标准输出设备,亦可指定输出文件. 用法: iconv [选项...] [文件...] 有如下选项可用: 输入/输出格式规范:-f, --from-cod ...

  10. python-mysqldb安装

    出现错误  command 'gcc' failed with exit status 1 解决办法: yum install python-devel mysql-devel zlib-devel ...