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. MFC中无边框窗口的拖动

      void CXXXXDialog::OnLButtonDown(UINT nFlags, CPoint point) { PostMessage(WM_NCLBUTTONDOWN, HTCAPTI ...

  2. 从零开始学 ios 的一些建议 摘自http://www.cocoachina.com/ios/20150826/13151.html

    我是一只小菜鸟,今天在cocoaChina 看到一篇关于初学者,也就是零基础的童鞋的一些建议,感觉写的好好. 我觉得,学习真的是很累,但是,你要记得一句话,,世界上最最可怕的两个字是认真.共勉! 事情 ...

  3. One or more types required to compile a dynamic expression cannot be found.

    This is because dynamic keyword is a new C# keyword. So we need to import Microsoft.CSharp.dll. Here ...

  4. Scala映射

    #映射: 包含一组键值对应元素的集合 val Z=Map(a1->b1,...)  //a1如果是字符,需要用双引号括起来 val Z=Map((a1,b1),...) ##可变映射, 内容可更 ...

  5. wpf 遮住输入法 问题

    可以参考这个代码   http://www.cnblogs.com/Leaco/p/3164394.html 当你发现没用的时候 可以改这句代码  var hwnd = ((HwndSource)Pr ...

  6. (十三) [终篇] 一起学 Unix 环境高级编程 (APUE) 之 网络 IPC：套接字

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...

  7. 第一次将内容添加到azure event hubs

    由于每秒数据吞吐量巨大,需要将实时数据存到event hubs,再由event hubs定时定量保存到document DB. event hubs的介绍详见微软官页:https://azure.mi ...

  8. linux 登录档配置分析

    登录档的重要性 解决系统方面的错误: 解决网络服务的问题: 过往事件记录簿: Linux 常见的登录档档名 /var/log/cron: 你的 crontab 排程有没有实际被进行? 进行过程有没有发 ...

  9. nth_element 测试程序

    /******************************************************************** created: 2014/04/29 11:35 file ...

  10. wini -- FileSubmitByFTP

    // winFtpPutFiles.cpp : Defines the entry point for the console application.// #include "stdafx ...