前文

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. 【问题】No manual entry for pthread_create in section 3

    参考文章:https://blog.csdn.net/wwwlyj123321/article/details/79211184 apt-get install manpages-posix manp ...

  2. PAT Basic 1050 螺旋矩阵 (25 分)

    本题要求将给定的 N 个正整数按非递增的顺序,填入“螺旋矩阵”.所谓“螺旋矩阵”,是指从左上角第 1 个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为 m 行 n 列,满足条件:m×n 等于 N:m ...

  3. C# 开发的windows服务 不能调试——讨论整理

    CSDN的标题:C# 开发的windows服务 不能调试 System.Diagnostics.Debugger.Launch();在想加断点的地方加入这行,是进入断点的,可以进行调试,我的是xp系统 ...

  4. Paper Reading:Mask RCNN

    Mask RCNN 论文:Mask R-CNN 发表时间:2018 发表作者:(Facebook AI Research)Kaiming He, Georgia Gkioxari, Piotr Dol ...

  5. 使用java中的反射获得object对象的属性值

    知识点:使用java中的反射获得object对象的属性值 一:场景 这两天开发代码时,调用别人的后台接口,返回值为Object对象(json形式的),我想获得object中指定的属性值,没有对应的ge ...

  6. Unknown initial character set index '255' received from server. Initial client character 解决方法

    Unknown initial character set index '255' received from server. Initial client character set can be ...

  7. 希尔排序Shell_Sort

    概述:听到希尔排序这个名称,心里完全没有任何概念,因为这个名称不能给你提供任何有效的信息.但是它的名字又是那么的特殊,以至于学习过数据结构排序的都知道这种方法的存在.现在我们就来看一下所谓的希尔排序. ...

  8. CSS3过渡动画&关键帧动画

    一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

  9. Java集合--整体框架

    Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等.Java集合工具包位置是java.util.*Java集合主要可以划分为4个部分:List列表.Set集合 ...

  10. K3CLOUD 常用数据表

    二.K3 Cloud 开发插件<K3 Cloud 常用数据表整理>一.数据库查询常用表 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 通过表T_META_OBJECTTYPE的F ...