前文

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

                归根到此，Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！

官方：https://www.swiper.com.cn/

官方API文档：https://www.swiper.com.cn/api/index.html

官方资源下载：https://www.swiper.com.cn/download/index.html

引入资源

<link  href="dist/css/swiper.min.css"  rel="stylesheet"> <!-- 注意，必须强制添加rel节点，不然不能正常使用 -->

<script src="dist/js/swiper.min.js"></script>

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link  href="dis/css/swiper.min.css"  rel="stylesheet"> <!---->

    <style>

        /* 设置轮播组件的高宽 */

        .swiper-container {

            width:1500px;

            height: 420px;

        }

    </style>

</head>

<body>

    <div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="data:images/one.png"></div>

                <div class="swiper-slide"><img src="data:images/two.png"></div>

                <div class="swiper-slide"><img src="data:images/three.png"></div>

                <div class="swiper-slide"><img src="data:images/four.png"></div>

                <div class="swiper-slide"><img src="data:images/five.png"></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>

        <script src="dis/js/swiper.min.js"></script>

        <script src="dis/js/jquery-1.11.3.min.js"></script>

        <script>

            $(function(){

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

                    direction: 'horizontal', // 水平切换选项,

                    loop: true, // 循环模式选项

                    // 如果需要分页器

                    pagination: {

                        el: '.swiper-pagination',

                    },

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

                    navigation: {

                        nextEl: '.swiper-button-next',

                        prevEl: '.swiper-button-prev',

                    },

                    // 如果需要滚动条

                    // scrollbar: {

                    //     el: '.swiper-scrollbar',

                    // },

                    //自动播放

                    autoplay: {

                        autoplay:true,//自动播放

                        delay:3000, //自动切换的时间间隔，单位ms

                        disableOnInteraction :false //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。

                    },

                    on:{

                        autoplayStart:function(){

                            console.log('开启自动切换');

                        },

                        autoplayStop:function(){

                            console.log('关闭自动切换');

                        }

                    }

                })

            })

        </script>

</body>

</html>

效果

Swiper轮播插件使用的更多相关文章

  1. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  2. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  3. Swiper 轮播插件 之 动态加载无法滑动

    1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...

  4. 使用swiper 轮播插件ajax 请求加载图片时，无法滑动问题

    因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...

  5. Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址

    Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...

  6. 【swiper轮播插件】解决swiper轮播插件触控屏问题

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

  7. vue中添加swiper轮播插件

    网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...

  8. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  9. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

随机推荐

  1. markdown编辑器抉择经历（做笔记\多系统用户)

    之前一段时间,为了找到一款合适的md编辑器可谓是费尽了心思,用了我不少时间才找到一款合适的跨平台的又美观方便的编辑器----马克飞象. 感觉虽然有些编辑器功能很强大,对于使用性单一的用户,比如像我这种 ...

  2. jquery 选择器能否查找display：none的元素

    jQuery可以用可见性“:hidden”查找“display:none”的元素. 1.新家html文档,在head标签中引入本地jQuery文件,也可以引入cdn文件: 2.在body标签中添加一些 ...

  3. 理解 shared_ptr实现copy-on-write（COW）

    看muduo库某个生产者消费者的地方,利用shared_ptr有效减少了锁的范围及无用的拷贝,下面来看一看 // reader 消费者, shared_ptr<map<string,int ...

  4. python学习之基础入门,安装,字符串,数据转换,三元运算符

    python基础 我们要开始学习新的编程语言了,加油~~ python是“世界上最好的语言”,学习它当然是认为它是最好的所以我们才学(人生苦短我学python),python运用于不同的领域,采集分析 ...

  5. MATLAB中.m文件生成.dll

    1.配置编译环境 在命令行窗口输入: mbuild -setup 如果出现以下提示信息说明成功: 如果提示信息为: 错误使用mbuild(line 164) Unable to complete su ...

  6. 《流畅的Python》Data Structures--第3章 dict 和 set

    dict and set 字典数据活跃在所有的python程序背后,即使你的源码里并没有直接使用它. 和dict有关的内置函数在模块builtins的__dict__内. >>> _ ...

  7. 算法设计与分析 - 李春葆 - 第二版 - pdf->word v3

    1.1 第1章─概论 练习题 . 下列关于算法的说法中正确的有( ). Ⅰ.求解某一类问题的算法是唯一的 Ⅱ.算法必须在有限步操作之后停止 Ⅲ.算法的每一步操作必须是明确的,不能有歧义或含义模糊 Ⅳ. ...

  8. python面向对象基础（四）内置方法 __xx__之new与init

    __init__和__new__方法 __new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构造方法 __init__() 负责将 ...

  9. P4148 简单题 k-d tree

    思路:\(k-d\ tree\) 提交:2次 错因:整棵树重构时的严重错误:没有维护父子关系(之前写的是假重构所以没有维护父子关系) 题解: 遇到一个新的点就插进去,如果之前出现过就把权值加上. 代码 ...

  10. 002_linux驱动之_register_chrdev注册字符设备

    (一)解析:register_chrdev函数和unregister_chrdev函数 (二)register_chrdev函数原型 int register_chrdev(unsigned int ...