一、简介

①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。

③主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

二、文档

①中文网址：http://2.swiper.com.cn/

②中文网地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档

三、使用方法

①加载

  • 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
      <link rel="stylesheet" href="path/to/swiper.min.css">

           ...

　　　　    ...

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

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

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

　　　　 ...

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

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

②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>

③初始化

  • 初始化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>

四、示例（轮播图）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>轮播图</title>

    <!-- 引入swiper3.0 css文件 -->

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

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

        }

        ul{

            list-style: none;

        }

        a{

            text-decoration: none;

        }

        .container {

            position: relative;

            width: 750px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <!-- 版心 -->

    <div class="container">

        <!-- 轮播图 -->

        <div class="swiper-container">

            <ul class="swiper-wrapper">

                <li class="swiper-slide"><a href="#"><img src="data:images/banner01.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner08.jpg" alt=""></a></li>

            </ul>

            <!-- 分页器 -->

            <div class="swiper-pagination"></div>

        </div>

    </div>

    <!-- 引入swiper3.0插件脚本 -->

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

    <!-- js初始化脚本 -->

    <script>

       window.onload=function(){

            /* 轮播图 */

            new Swiper('.swiper-container',{

                autoplay:1000,

                loop:true,

                pagination:'.swiper-pagination',

                autoplayDisableOnInteraction:false

            });

       }

    </script>

</body>

</html>

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

  1. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  2. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  3. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  4. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  6. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. Hive 系列（二）—— Linux 环境下 Hive 的安装部署

    一.安装Hive 1.1 下载并解压 下载所需版本的 Hive,这里我下载版本为 cdh5.15.2.下载地址:http://archive.cloudera.com/cdh5/cdh/5/ # 下载 ...

  2. mongoDB对没有字段的记录新增字段

    db.getCollection('ClassRecordOneDetail').updateMany({'synState':{'$exists':false}},{'$set':{'synStat ...

  3. Windows 2003 服务器 关闭IIS中FTP匿名访问

    控制面板 –> 管理工具 –> Internet信息服务管理器打开后左侧选择相应的FTP站点右击 –> 属性 –> 安全帐户允许匿名连接 前面的√取消掉,点击确定完成

  4. Redis笔记01——win10 64位系统安装Redis 3.2.100

    前言 由于项目中需要用到Redis,所以先在自己的win10上安装来体验一下. 安装步骤 一.下载地址 Redis下载地址 我选择的是3.2.100 的 64位 zip版本 二.安装位置以及文件简介 ...

  5. centos7#yum install ffmpeg

    yum install ffmpeg rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro rpm -Uvh http://li. ...

  6. permission

    import 'package:flutter/material.dart'; import 'dart:io'; import 'dart:async'; import 'package:rxdar ...

  7. PHP实现curl post和get

    CURL这里就不说明了.以下是简单案例 一.POST //初始化 $curl = curl_init(); //设置抓取的url curl_setopt($curl, CURLOPT_URL, 'ht ...

  8. 【openshift】OC命令部署Openshift

    OC命令部署Openshift # install openshift wget -c https://github.com/openshift/origin/releases/download/v3 ...

  9. python创建简单网站

    前言 本方法基于web2py框架,使用web2py的完整网站数据包创建简单网站. web2py 是一个为Python语言提供的全功能Web应用框架,旨在敏捷快速的开发Web应用,具有快速.安全以及可移 ...

  10. vue-quill-editor回显时移除焦点

    直接复制开用 解决在回显数据的时候会默认聚焦 this.$refs.myQuillEditor.quill.enable(false); setTimeout(() => { this.$ref ...