本文主要介绍了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. 软件工程(GZSD2015) 第二次作业成绩

    作业评分表 姓名 提交 语言 界面 PSP(3) CODE(4) 代码规范(2) 改进(1) 基本得分 提交时间 原始总得分 相对得分 最终得分 涂江凤 20150407 C CLI 3 4 2 1 ...

  2. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  3. git 忽略部分文件类型的同步

    场景 利用 pycharm 进行代码操作的时候会自动创建 .idea/ 文件夹 特么我每次随便做点操作.这里面的东西也会随着自动改一些 一开始开始无视 如果是多人协同开发会导致代码合并相关的问题 因此 ...

  4. edusoho -A5: AppBundle UML

    edusoho -A5:  AppBundle UML

  5. Lua语法基础（二）

    1. 函数 1.1 函数声明 默认为全局 局部函数使用local关键字声明 1.2 参数 ...等同于Python中*args三个点表示可变参数 1.3 获取参数长度的两种方式 (1)将传入的参数.. ...

  6. 百度在职 iOS 架构师的成长笔记，送给还在迷茫的你！

    前言 我们经常在网上会看到这样的文章,你的同龄人正在如何如何.......这是典型的贩卖焦虑的文章.的确,现阶段,刚毕业几年的年轻人,面临车,房子等,有时候压力挺大的. 但你过度焦虑的话,每天生活在恐 ...

  7. filebeat+logstash配置

    一. filebeat.yml的配置 filebeat.prospectors:- input_type: log paths: - /tmp/logs/optimus-activity-api.lo ...

  8. A Graph Partitioning Game Theoretical Approach for the VNF Service Chaining Problem

    文章名称:A Graph Partitioning Game Theoretical Approach for the VNF Service Chaining Problem 发表时间:2017 期 ...

  9. 驱动调试(四)oops确定调用树

    目录 驱动调试(四)oops确定调用树 内核开启调用树 栈指针分析 原理 寄存器别名 基础解释 例子分析 找到PC地址的位置 栈分析 附录:原文的excel title: 驱动调试(四)oops确定调 ...

  10. saltstack主机管理项目：编写插件基类-获取主机列表-提取yaml配置文件（四）

    一.编写插件基类 1.目录结构 1.我是如何获知我有多少种系统? 当客户端第一连接过来的时候,我就已经把这些文件存下来了 ,存在到哪里了?存到数据库了 每次对主机发送命令的动作时,我从库里把数据取出来 ...