Swiper4.x使用方法

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>

<html>

<head>

    ...

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

</head>

<body>

    ...

    <script src="path/to/swiper.min.js"></script>

</body>

</html>

2.HTML内容。

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide">Slide </div>

        <div class="swiper-slide">Slide </div>

        <div class="swiper-slide">Slide </div>

    </div>

    <!-- 如果需要分页器 -->

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

    <!-- 如果需要导航按钮 -->

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->

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

</div>

导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {

    width: 600px;

    height: 300px;

}

4.初始化Swiper：最好是挨着</body>标签

<script>

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

    direction: 'vertical',

    loop: true,

    // 如果需要分页器

    pagination: {

      el: '.swiper-pagination',

    },

    // 如果需要前进后退按钮

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

    // 如果需要滚动条

    scrollbar: {

      el: '.swiper-scrollbar',

    },

  })

  </script>

</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript">

window.onload = function() {

  ...

}

</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">

$(document).ready(function () {

 ...

})

</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

swiper坑

1.一个页面引用多个swiper插件，出现混乱问题；

　　解决方法： 1.实例化swiper时加上其父元素加以区分

　　　　　　　 2.Swiper加上ID或Class区分，要保留默认的类名swiper-container

　　如下：

<script>

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

                pagination: '.course_banner2 .swiper-pagination',

                paginationClickable: true,

                loop: true,

                autoplay:

            });

            </script>

2. swiper隐藏之后，再显示，滑动不流畅，且无限滑动会失败；

　　解决方法： 添加一下两个属性　　　

　　　　observer: true,//修改swiper自己或子元素时，自动初始化swiper
　　　　observeParents: true,//修改swiper的父元素时，自动初始化swiper

3.动态生成的swiper，如append()，或html()添加的，无限滑动效果失败；

　　解决方法：

　　　　a. 添加上面两个属性

　　　　b.把swiper方法写在动态生成的方法里面

　　如下所示：

function bigPic(comment_id) {

        $('.win_pic').show();

        $.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){

            if(data.status == ){

                $("#content").text(data.comment.c_content);

                $(".swiper-wrapper").html('');

                var html = '';

                var images = data.comment.images;

                for (var i=; i < images.length; i++) {

                    html += "<div class='swiper-slide'><img src=__ROOT__/" + images[i]['thumb_image'] + "></div>";

                }

                $(".swiper-wrapper").html(html); //swiper已动态生成

                //实例化swiper

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

                    pagination: '.nav .swiper-pagination',

                    paginationClickable: true,

                    centeredSlides: true,

                    autoplay: false,

                    autoplayDisableOnInteraction: false,

                    paginationType: 'fraction',

                    observer: true,//修改swiper自己或子元素时，自动初始化swiper

                    observeParents: true,//修改swiper的父元素时，自动初始化swiper

                    loop: true,

                    paginationFractionRender: function(swiper, currentClassName, totalClassName) {

                        return '<span class="' + currentClassName + '"></span>' +

                            '/' +

                            '<span class="' + totalClassName + '"></span>';

                    }

                })

            }

            console.log(data);

        }, "json");

    }

4.移动端使用swiper需加onTouchStart、onTouchEnd，下拉时轮播停止BUG。（针对 apicloud 开发)

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

        pagination: '.swiper-pagination',

        loop: true,

        paginationClickable: true,

        centeredSlides: true,

        autoplay: ,

        autoplayDisableOnInteraction: false,

        onTouchStart: function(swiper) {

                api.setFrameAttr({

                    name: api.frameName,

                    bounces: false

                });

            },

        onTouchEnd: function(swiper) {

                api.setFrameAttr({

                    name: api.frameName,

                    bounces: true

                });

            }

    });

官网网址:http://www.swiper.com.cn/

(网页)swiper.js轮播图插件的更多相关文章

  1. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  2. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

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

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

  5. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  7. vue轮播图插件vue-awesome-swiper的使用与组件化

    不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. .Net 从零开始构建一个框架之基本实体结构与基本仓储构建

    本系列文章将介绍如何在.Net框架下,从零开始搭建一个完成CRUD的Framework,该Framework将具备以下功能,基本实体结构(基于DDD).基本仓储结构.模块加载系统.工作单元.事件总线( ...

  2. Linux编程 11(shell全局环境变量与局变环境变量)

    一.概述 在linux中,很多程序和脚本都通过环境变量来获取系统信息,存储临时数据,配置信息.环境变量是指用来存储有关shell会话和工作环境信息,允许你在内存中存储数据,以便程序或shell中运行的 ...

  3. Number(),parseInt(),parseFloat(),Math.round(),Math.floor(),Math.ceil()对比横评

    首先,这些处理方法可分为三类. 1,只用来处理数字取整问题的:Math.round(),Math.floor(),Math.ceil(): 2,专门用于把字符串转化成数值:parseInt(),par ...

  4. cookie、session总结

    前几天在调试第三方支付接口时碰到一个session失效问题,用了几天时间才搞明白,现在回想一下,主要还是由于cookie和session这一块的一些基本概念没有搞清楚,现总结一下. 浏览器使用HTTP ...

  5. jvm详情——3、JVM基本垃圾回收算法回收策略

    JVM基本垃圾回收算法回收策略 引用计数(Reference Counting):比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数.垃圾回收时,只用收集计数为0的 ...

  6. MariaDB/MySQL备份和恢复(二)：数据导入、导出

    MariaDB/MySQL备份恢复系列: 备份和恢复(一):mysqldump工具用法详述 备份和恢复(二):导入.导出表数据 备份和恢复(三):xtrabackup用法和原理详述 1.导出.导入数据 ...

  7. 伪指令 ADR 与 LDR 的区别

    指令简介: adr r0, _start 得到的是 _start 的当前执行位置,由 pc+offset 决定 ldr r0, =_start 得到的是绝对的地址,链接时决定 程序示例: ldr r0 ...

  8. spring-cloud-starter-gateway

    ********************************************************** Spring MVC found on classpath, which is i ...

  9. 积累一些不太常用的C/C++语言知识（不断更新）

    这里积累一些日常编程用得比较少的知识,不断添加. scanf("%c%*c%c",&a,&b); 其中的*表示跳过,本来输入三个数字,结果中间那个读入后被抛弃,a和 ...

  10. 异常：android.os.NetworkOnMainThreadException

    场景: 安卓开发时在主线程访问网络解决: 将访问网络的代码使用Thread操作 Handler handler = new Handler(){ @Override public void handl ...