本文主要介绍了swiper配置选项，包含了轮播的无限滚动、懒加载、监听当前位置、上下翻页、过渡动画渐变、延时加载图片、自动轮播等；　

swiper官方链接DEMO

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->

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

    <!-- Demo styles -->

    <style>

    body {

        background: #eee;

        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        font-size: 14px;

        color:#000;

        margin: 0;

        padding: 0;

    }

    .swiper-container {

        width: 100%;

        /*控制swiper组件的高度height*/

        /*height: 450px;*/

        max-height: 60vh;

    }

    .swiper-slide {

        /* Center slide text vertically */

        /*弹性盒子flex的应用*/

        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;

    }

    /*swiper容器内图片*/

    .swiper-slide img{

        width: 100%;

    }

    </style>

</head>

<body>

    <!-- Swiper -->

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide">

                <!--data-src懒加载-->

                <img data-src="public/img/timg0.jpg" class="swiper-lazy">

                <div class="swiper-lazy-preloader"></div>

            </div>

            <div class="swiper-slide">

                <!--data-src懒加载-->

                <img data-src="public/img/timg1.jpg" class="swiper-lazy">

                <div class="swiper-lazy-preloader"></div>

            </div>

            <div class="swiper-slide">

                <!--data-src懒加载-->

                <img data-src="public/img/timg2.jpg" class="swiper-lazy">

                <div class="swiper-lazy-preloader"></div>

            </div>

        </div>

        <!-- Add Pagination -->

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

    </div>

    <!--jQ-->

    <script src="public/js/jquery-2.1.4.min.js"></script>

    <!-- Swiper JS -->

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

    <!-- Initialize 初始化 Swiper -->

    <script>

        $(document).ready(function () {

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

                pagination: '.swiper-pagination',//可选选项，是否显示分页器

                paginationClickable: true,//可选选项，是否点击分页器滑动

                lazyLoading : true,//是否懒加载

                lazyLoadingInPrevNext : true,//可选选项，设置为true允许将延迟加载应用到最接近的slide的图片

                autoplay: 3000,//可选选项，自动滑动的时间,1000为1秒

                speed:2000,//可选选项，翻一页切换的速率

                initialSlide :1,//可选选项，初始的页面，默认0

                //direction : 'vertical',//可选选项，滚动的方向，默认水平

                //parallax : true,//可选选项，视距差

                //nextButton: '.swiper-button-next',//下一页

                //prevButton: '.swiper-button-prev',//上一页

                //width : window.innerWidth,//可选选项，全屏

                effect : 'fade',//可选选项，渐变动画

                //onSlideChangeStart: function(swiper){

                    //alert(swiper.activeIndex);

                //},//获取当前的序号开始时触发函数，改为onSlideChangeEnd是切换成功后触发

                loop: 1,//是否无限滚动

                //点击事件

                //onTap: function(swiper){

                  //  alert('你tap了Swiper');

                //},//在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件

            });

            //自定义上一页、下一页

            $('#btn1').click(function(){

                swiper.slidePrev();

            });

            $('#btn2').click(function(){

                swiper.slideNext();

            });

        })

    </script>

</body>

</html>

轮播swiper配置选项的更多相关文章

  1. swiper轮播 swiper整屏轮播

    近期坐了几个移动端 整屏轮播的  效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...

  2. 轮播——swiper

    swiper组件 1.轮播数据是使用ajax进行填充的话,可能数目是0~n,在数目是1时,轮播会出现一些问题(出现空白侧),这时需作出判断(一张图片不滑动,多张就就行滑动),方法如下(以下方法中,si ...

  3. iOS开发——图片轮播图+单选选项

    由于公司开发需要,需要滚动每道评测题, 并且一道评测题单项选择,按钮和文字都可点击选中 (单选比多选复杂一点,但是原理差不多) 1.当初任务紧,代码也没有优化,仅供思路参考,先放几张图 2.代码部分 ...

  4. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  5. 微信小程序之 Swiper（轮播图）

    1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...

  6. asp.net Swiper 轮播动画

    原文:https://blog.csdn.net/qq_39656138/article/details/90451289 官网:https://www.swiper.com.cn/api/index ...

  7. Android 轮播图Banner切换图片的效果

    Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910   版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...

  8. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  9. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

随机推荐

  1. WSL、Git on Windows 、Putty等的创建的rsa秘钥与连接linux的使用。

    1. 在windows 上面可以使用多种方式创建公钥和私钥 这里从一开始说: 1.1 windows subsystem linux 的方式最简单了 cmd 命令行 下 进入 WSL 输入命令 bas ...

  2. ubuntu fiddler firefox http网页不能访问 Secure Connection Failed

    1. 给firefox导入fiddler的证书 1) fiddler:tools --> fiddler opthins --> https --> 勾选Capture HTTPS ...

  3. [模板] 区间mex && 区间元素种数

    区间mex 问题 给定序列\({a_i}\), 每次询问给出\(l\), \(r\), 询问 \(\text{mex} \{a_i\}, i \in \{l, l+1, \cdots r\}\) 解法 ...

  4. WebViewClient 与 WebChromeClient

    WebViewClient帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”.常用的shouldOverrideUrlLoading就是该类的一个方法,比如: on ...

  5. Magento2自定义命令

    命令命名准则 命名指南概述 Magento 2引入了一个新的命令行界面(CLI),使组件开发人员能够插入模块提供的命令. Command name Command name 在命令中,它紧跟在命令的名 ...

  6. mysql表加锁、全表加锁、查看加锁、解锁

    单个表锁定: 格式: LOCK TABLES tbl_name {READ | WRITE},[ tbl_name {READ | WRITE},……] 例子: lock tables db_a.tb ...

  7. elasticsearch更改mapping(不停服务重建索引)

    转载地址:http://donlianli.iteye.com/blog/1924721?utm_source=tuicool&utm_medium=referral Elasticsearc ...

  8. Entity Framework入门教程（10)---离线场景保存和删除实体/实体图集

    离线场景保存和删除实体/实体图集 这一节的内容是在离线场景中保存实体和实体图集 在离线场景中,当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先,我们要把实体附加到新的上下文中 ...

  9. sprin源码解析之属性编辑器propertyEditor

    目录 异常信息 造成此异常的原因 bean 配置文件 调用代码 特别说明: 异常解决 注册springt自带的属性编辑器 CustomDateEditor 控制台输出 属性编辑器是何时并如何被注册到s ...

  10. 库增删该查，表增删该查，记录增删该查，表与表关系(多对多，多对一，一对一)，mysql用户管理

    库增删该查 增加库 create database db1 create database db1 charset="gbk 查看库 show databases 查看所有库 show cr ...