前文

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. IPC——管道

    概述 管道通信分为无名管道.有名管道 管道通信的本质 不管是有名管道,还是无名管道,它们的本质其实都是一样的,它们都是内核所开辟的一段缓存空间.进程间通过管道通信时,本质上就是通过共享操作这段缓存来实 ...

  2. jquery动态加载并解决被加载页面js失效问题

    代码布局结构分为 header  left  content html代码如下: <!DOCTYPE html> <html lang="zh-CN"> & ...

  3. 【简易DFS/BFS+标记搜索次序的数组】zznu-2025 : 简单环路

    2025 : 简单环路 时间限制:1 Sec 内存限制:128 MiB提交:145 答案正确:41 提交 状态 编辑 讨论区 题目描述 有一个N x M 大小的地图,地图中的每个单元包含一个大写字母. ...

  4. matlab安装MinG-w64 C/C++编译器

    matlab 2018b之编译器的安装 安装MinGW C/C++ 编译器

  5. [ 转载 ] vue.js面试题一

    转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...

  6. vue1 get,post交互及百度下拉列表demo

  7. Java8-Lambda-No.03

    import java.util.Comparator; import java.util.Objects; import java.util.UUID; import java.util.concu ...

  8. [2019HDU多校第二场][HDU 6591][A. Another Chess Problem]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6591 题目大意:二维坐标系上,所有满足\(5|2x+y\)的点都被设为障碍物,无法通过.现给出一对点, ...

  9. learning express step(一)

    first : create new project then install express package : npm install express --savenpm WARN saveErr ...

  10. D. AB-string （ 思维 ）

    传送门 题意: 给你一个长度为n的字符串, 字符串只由 A B 组成. 问你这个字符串存在多少个 good string: ( 连续的一段子串 ) good string 的定义就是: 字符串中所有的 ...