本文主要介绍了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. 干货型up主

    很多教学视频,我看了反射,正在看JAVAWEB 和Spring  讲得很清楚 反正就是很好!!! https://space.bilibili.com/326782142?spm_id_from=33 ...

  2. vue脚手架搭建移动端项目--flexible.js

    通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 ...

  3. swiper 轮播图，拖动之后继续轮播

    在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...

  4. SyntaxError: missing ) after argument list

    消息 语法错误: 参数列表后面缺少 ) 错误类型 SyntaxError. 什么地方出错了? 有一个函数在调用时出现错误.这可能是一个错误,丢失运算符或者转义字符等. 示例 因为没有使用 ”+“ 操作 ...

  5. centos7之vsftp安装和使用

    日常用作中,我们常用的是windows的共享,但是我们都知道windows运行不稳定.原来我们用的是centos6.5上的vsftpd,最近决定把centos6.*上的服务都移植到centos7上,好 ...

  6. pci设备驱动相关

    pci 设备注册及查找: https://www.cnblogs.com/image-eye/archive/2012/02/15/2352912.html PFN https://nieyong.g ...

  7. 部署alinode监控线上应用

    参考: https://segmentfault.com/a/1190000013089124

  8. 从备份文件bak中识别SQL Server的版本

    SQLServer 的备份文件是以.bak 为后缀的文件,如果想要通过备份文件查看数据库版本,通常的做法就是把数据库还原,但是在还原的过程,如果不是相同的数据库版本,就会导致无法还原: 在数据库中,低 ...

  9. 修改帝国cms栏目后，如何更新

    修改栏目后,要依次做如下更新: 1.    2.  3.    如果只是修改了栏目里的属性,只需要做第三步就行了

  10. 彻底理解cookie，session，token

    发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应,  尤其是我不用 ...