前文

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. Tornado目录

    第一篇:白话tornado源码之一个脚本引发的血案 第二篇:白话tornado源码之待请求阶段 第三篇:白话tornado源码之请求来了 第四篇:白话tornado源码之褪去模板外衣的前戏 第五篇:白 ...

  2. 2.Vue调试工具vue-devtools的安装步骤和使用

    1.安装步骤: 打开谷歌浏览器设置 -->扩展程序 -->勾选开发者模式 --->加载已解压的扩展程序 --->选择“chrome扩展”文件夹即可:

  3. (13)input输入函数

    (1)input 等待用户动态输入一个值,注意得到的值是一个字符串类型 提示用户输入用户名和密码: 如果用户名是admin , 并且密码是000 , 提示用户恭喜你,登陆成功 否则提示用户名或密码错误 ...

  4. inux中查看各文件夹大小命令：du -h --max-depth=1

    du [-abcDhHklmsSx] [-L <符号连接>][-X <文件>][--block-size][--exclude=<目录或文件>] [--max-de ...

  5. ZooKeeper介绍（转载）

    关于ZooKeeper,下面引用了一片文章,原文地址是:http://www.cnblogs.com/wuxl360/p/5817471.html 一.分布式协调技术 在给大家介绍ZooKeeper之 ...

  6. linux实操_shell预定义变量

    当前进程号: 运行后 后台最后一个进程号: 运行后

  7. mongod破解版的安装

    navicat for mongodb 12,又叫做navicat 12 for mongodb,是针对mongodb软件而开发的一款管理软件,拥有高效图形用户界面,能够连接本地或远程的MongoDB ...

  8. C语言学习系列（三）C程序结构

    一.C程序结构 C 程序主要包括以下部分: 预处理器指令 函数 变量 语句 & 表达式 注释 new C program demo: #include <stdio.h> /*预处 ...

  9. Python操作MySQL数据库，插入重复数据

    sql = "INSERT  INTO test_c(id,name,sex)values(%s,%s,%s)" param = (1,'AJ','MAN') n = cursor ...

  10. Android系统输入事件分发详解

    什么是输入事件? 我们知道,运行android系统的设备本质上是一台计算机,使用者在和计算机进行交互的时候可以抽象成简单的对计算机的输入和输出(IO).那么对于运行在计算机上的操作系统来说,操作系统在 ...