本文主要介绍了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. 洛谷P3957 跳房子(Noip2017普及组 T4)

    今天我们的考试就考到了这道题,在考场上就压根没有思路,我知道它是一道dp的题,但因为太弱还是写不出来. 下来评讲的时候知道了一些思路,是dp加上二分查找的方式,还能够用单调队列优化. 但看了网上的许多 ...

  2. AngularJS 1.x系列：AngularJS控制器（3）

    1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...

  3. Python——装饰器

    1.装饰器形成的过程 2.装饰器的作用 3.原则:开放封闭原则 开放:对扩展是开放的 封闭:对修改是封闭的 4.装饰器的固定模式 def func(): time.sleep(0.01) ') def ...

  4. docker基础维护命令

    docker images显示当前存在的images docker ps,显示当前的container docker rm containerId 删除指定的container(需要先停止,才能删除) ...

  5. SQL Data Discovery and Classification

    The new version of SQL Server Management Studio (v17.5) brings with it a new feature: SQL Data Disco ...

  6. cglib 代理实现

    cglib代理的原理是通过继承实现对目标对象的代理 //1.接口 package cn.itcast.service; public interface UserService { void save ...

  7. CODEVS 3546 矩阵链乘法

    http://codevs.cn/problem/3546/ 题目 给定有n个要相乘的矩阵构成的序列(链)<A1,A2,A3,.......,An>,要计算乘积A1A2.....An.一组 ...

  8. vue 拖拽移动（类似于iPhone虚拟home ）

    vue 移动端 PC 兼容 元素 拖拽移动  效果演示 事件知识点 移动端 PC端 注释 touchstart mousedown 鼠标/手指按下事件 touchmove mousemove 鼠标/手 ...

  9. 自用windows小软件

    好用的软件的定义:没有广告,提升效率,最低的内存占用,体积小 1.解压工具 bandizip:自动解压功能,棒呆了 网址:https://www.bandisoft.com/ 2.pdf阅读编辑工具 ...

  10. python学习日记（内置函数补充）

    剩余匿名函数 序列 序列——列表和元组相关的:list和tuple 序列——字符串相关的:str,format,bytes,bytearry,memoryview,ord,chr,ascii,repr ...