本文主要介绍了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. PS图片后期之超简易造光调色方法

    技法是死的,而人是活的,说的简单一点就是我们要学会开拓一下思维,调色的方法并不是只有[可选颜色]而已. 在修片之前,我们先要学会分析,在拍摄这一组照片时我希望有一种夕阳的光穿透晒在脸庞的感觉,而左边的 ...

  2. Flask 快速使用 进阶—— （2）

    案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...

  3. JSON数组形式字符串转换为List<Map<String,String>>的8种方法

    package com.zkn.newlearn.json; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArr ...

  4. Linux -- 项目部署

    一 . 负载均衡 负载均衡其实就是把其中一个服务器用做反向代理, 然后通过访问这个服务器实现负载均衡. 1.准备三台虚拟机 192.168.81.130 192.168.81.131 192.168. ...

  5. python爬取中国天气网站数据并对其进行数据可视化

    网址:http://www.weather.com.cn/textFC/hb.shtml 解析:BeautifulSoup4 爬取所有城市的最低天气   对爬取的数据进行可视化处理 按温度对城市进行排 ...

  6. 【51NOD1847】奇怪的数学题 min_25筛

    题目描述 记\(sgcd(i,j)\)为\(i,j\)的次大公约数. 给你\(n\),求 \[ \sum_{i=1}^n\sum_{j=1}^n{sgcd(i,j)}^k \] 对\(2^{32}\) ...

  7. nginx编译安装指定参数

    --prefix=/app/nginx # 安装目录 --conf-path=/app/nginx/conf/nginx.conf # 配置文件 --sbin-path=/app/nginx/sbin ...

  8. POJ--3974 Palindrome（回文串，hash）

    链接:点击这里 #include<iostream> #include<algorithm> #include<stdio.h> #include<cstri ...

  9. 自古枪兵幸运E

    好梗 求方程的解.n个可以奇数可以偶数,m个必须是偶数 两种方法: 都是O(nlogn)logn是LUCAS定理 法一: 有奇数有偶数,如果都是偶数,那么可以直接除以二然后组合数学 所以枚举有几个奇数 ...

  10. 用IntelliJ IDEA 开发Spring+SpringMVC+Mybatis框架 分步搭建二：配置MyBatis 并测试（2 配置spring-dao和测试）

    用IntelliJ IDEA 开发Spring+SpringMVC+Mybatis框架 分步搭建二:配置MyBatis 并测试(1 搭建目录环境和依赖) 四:在\resources\spring 下面 ...