前文

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. Computer Vision_18_Image Stitching： Image Alignment and Stitching A Tutorial——2006（book）

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  2. Image Processing and Analysis_8_Edge Detection：Statistical edge detection_ learning and evaluating edge cues——2003

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  3. Python更改pip源

    Python更改pip源 pip源有以下 新版ubuntu要求使用https源,要注意.清华:https://pypi.tuna.tsinghua.edu.cn/simple阿里云:http://mi ...

  4. js中对new Date() 中转换字符串方法toLocaleString的使用

    提供特定于区域设置的日期和时间格式. dateTimeFormatObj = new Intl.DateTimeFormat([locales][, options]) dateTimeFormatO ...

  5. C++ 输出PPM格式图片文件

    PPM简介 学习图形学时为了直观地观察结果,需要输出图片,而PPM是一种最简单的图片格式,非常适合新手使用. PPM文件的内容大概是这样的: 第一行固定为P3,代表写入的是PPM格式的RGB图像,除此 ...

  6. openpose-opencv 的coco数据多人体姿态估计

    介绍 opencv除了支持常用的物体检测模型和分类模型之外,还支持openpose模型,同样是线下训练和线上调用.这里不做特别多的介绍,先把源代码和数据放出来- 实验模型获取地址:https://gi ...

  7. AcWing 246. 区间最大公约数

    246. 区间最大公约数 思路: 首先根据更相减损术,我们得到一个结论: \(gcd(a_l, a_{l+1}, ...,a_r) = gcd(a_l, a_{l+1}-a_l, a_{l+2}-a_ ...

  8. PHP返回JSON数据及中文编码问题的解决方案

    在处理app接口的时候 ,中文在经过json_encode之后 变成\ \格式 想在返回接口的时候  中文不被转换 解决办法 第一种解决办法 exit(json_encode($result,JSON ...

  9. python+mysql:实现一千万条数据插入数据库

    作业要求 构建一个关系模式和课本中的关系movies(title,year,length,movietype,studioname,producerC)一样的关系,名称自定,在这个关系中插入1000万 ...

  10. 利用tycho插件自动生成pom文件

    mvn org.eclipse.tycho:tycho-pomgenerator-plugin:generate-poms -DgroupId=com.vogella.tychoexample com ...