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. 【ABP框架系列学习】模块系统(4)之插件示例开发

    0.引言 上一篇博文主要介绍了ABP模块及插件的相关知识,本章节主要开发一个插件示例来学习如何创建一个插件,并在应用程序中使用.这个命名为FirstABPPlugin的插件主要在指定的时间段内删除审计 ...

  2. MySQL数据库事务详解

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  3. SpringBoot系列——WebSocket

    关于websocket的介绍与实现,我之前写过一篇博客,记录了用springboot-websocket实现了私聊.群聊的简单实例,这里就只提供一个入口,不再重复的写了,WebSocket+Java ...

  4. spark之scala程序开发(集群运行模式)：单词出现次数统计

    准备工作: 将运行Scala-Eclipse的机器节点(CloudDeskTop)内存调整至4G,因为需要在该节点上跑本地(local)Spark程序,本地Spark程序会启动Worker进程耗用大量 ...

  5. TensorFlow(3)CNN中的函数

    tf.nn.conv2d()函数 参数介绍: tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=Non ...

  6. C# 7.1中default关键字的新用法

    default 关键字有两类用法 switch语句中指定默认标签 默认值表达式 switch 语句 int caseSwitch = 1; switch (caseSwitch) { case 1: ...

  7. [心得] 如何利用liquibase進行資料庫版本控制 - 基礎觀念

    前言 - 會寫這篇除了是要記錄一下使用的過程之外,也是發現到網路上找來的教學幾乎都是跟其它環境做結合 比較沒有單純利用command進行的流程.也沒有整體觀念的介紹,所以將我所理解的整理分享給大家. ...

  8. 第一册:lesson seventy three.

    原文: The way to King Street. Last week Mrs. Mills went to London. She does not know London very well, ...

  9. JQuery官方学习资料（译）：操作元素

      获取和设置元素的信息     有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...

  10. JQuery官方学习资料（译）：Attributes

    Attributes     元素的属性可以为你的应用程序包含有用的信息,重要的是能够获取和设置它. .attr()方法     .attr()方法是可获取和可设置的,在设置状态下,.attr()可以 ...