基本介绍：

  • 中文文档地址：https://www.swiper.com.cn/
  • 它是一个开源，免费，强大的触摸滑动插件。
  • 它是用纯Javascript打造的滑动特效插件，既可用于PC端，也可用于移动端设备。

基本使用：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" />

    <title>独秀不爱秀</title>

    <link rel="stylesheet" type="text/css" href="swiper/css/swiper.css">

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .swiper-container {

            width: 1000px;

            height: 500px;

            margin: 100px auto;

            background-color: green;

        }

        .swiper-slide {

            font-size: 30px;

            text-align: center;

            line-height: 500px;

            color: #fff;

        }

    </style>

</head>

<body>

    <div class="swiper-container">

        <ul class="swiper-wrapper">

            <li class="swiper-slide">1111</li>

            <li class="swiper-slide">2222</li>

            <li class="swiper-slide">3333</li>

            <li class="swiper-slide">4444</li>

            <li class="swiper-slide">5555</li>

            <li class="swiper-slide">6666</li>

            <li class="swiper-slide">7777</li>

        </ul>

        <!-- 分页器 -->

        <div class="swiper-pagination"></div>

        <!-- 导航按钮 -->

        <div class="swiper-button-prev"></div>

        <div class="swiper-button-next"></div>

    </div>

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

    <script type="text/javascript">

        // 初始化Swiper

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

            // 循环轮播

            loop: true,

            // 分页器

            pagination: {

                el: '.swiper-pagination',

                // 动态分页器：当你的slide很多时，为true后，分页器会有大小显示

                dynamicBullets: true,

            },

            // 前进后退按钮

            navigation: {

                nextEl: '.swiper-button-next',

                prevEl: '.swiper-button-prev',

            },

            // 自动轮播

            autoplay: {

                delay: 3000,

                /**

                 * stopOnLastSlide => true: 当切换到最后一个slide时停止自动切换

                */

                stopOnLastSlide: true,

                /**

                 * disableOnInteraction：用户操作swiper之后，是否禁止自动轮播

                 * true(默认) => 停止

                 * false      => 恢复自动轮播

                */

                disableOnInteraction: false,

            }

        });

    </script>

</body>

</html>

效果展示：

其他额外参数请参考中文文档。

Swiper4的基本使用的更多相关文章

  1. Swiper4.x使用方法

    1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html> <html> ...

  2. 记录一下对swiper4.x.js在H5单页中的滑动优化

    应用场景 仅仅应用于单页应用的滑动操作,用swiper4.x接管页面的滚动操作.用来支持顶部和尾部的回弹效果,进一步来支持常见那种下拉刷新动画效果.不适用于轮播图那种应用场景. 虽然只是针对swipe ...

  3. swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction

    swiper4轮播设置autoplay自动切换后,即默认设置: <script> var mySwiper = new Swiper('.swiper-container', { auto ...

  4. Vue 使用swiper4导致ie或手机浏览器打开空白的问题

    from:https://segmentfault.com/a/1190000015831092 在ie下发现就是swiper的不兼容,一加上去ie就不显示了.结果是swiper版本的问题,最新的sw ...

  5. vue-cli使用swiper4在ie以及safari报错

    vue-cli项目中,通过npm run swiper --save-dev安装的是swiper4版本的插件,这样安装以后在谷歌火狐等浏览器都可以正常运行,但是在safari浏览器(可能是版本太低)还 ...

  6. swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer

    用swiper4实现的拥有header和footer的全屏滚动demo, <!DOCTYPE html> <html lang="en"> <head ...

  7. 在vue中使用swiper4.x

    需求 :实现一个左右两边有边距的轮播图vue+swiper4 轮播图左右两边含有上一张和下一张的一部分 先安装swiper: 1.npm install swiper 安装swiper   2.在入口 ...

  8. swiper4 一个页面多个轮播

    <div class="swiper-container"> <div class="swiper-wrapper"> <div ...

  9. swiper4初始化/swiper-init/data-swiper

    用data属性初始化swiper <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  10. swiper4基础

    这段时间在公司实习做前端,感觉前端没学习到很多前端框架,接口那些都是写好的,只需要调用就好,感觉没什么好记的,唯一觉得有必要记的就是swiper轮播了,在前端做网站的时候经常用到swiper做公告,图 ...

随机推荐

  1. vi编辑器操作 快捷键

    vi编辑器操作 快捷键 1. 命令模式 与 编辑模式切换 a:光标向后移动一位进入编辑模式 i:光标和内容 没有变化进入编辑模式 o:新起一行进入编辑模式 s:删除光标所在字符进入编辑模式       ...

  2. 蓝牙BLE： ATT和GATT的概念

    BLE通信由两种设备类型构成—— Client和Server. Server提供数据服务,所以一般来说设备是Server,手机是Client.Server和Client通过ATT PDU进行交互,Se ...

  3. 荔枝派zero从焊接到跑起linux

    步骤 焊flash芯片(如果大于16M,需要改烧录工具的源码) 焊引脚,为了串口看数据 焊接flash芯片,需要注意1号脚的位置,flash芯片在开发板背面,1号脚位置是靠近麦克风的那边 以下为编译相 ...

  4. fiddler抓包详解

    image.png 前言 fiddler是一个很好的抓包工具,默认是抓http请求的,对于pc上的https请求,会提示网页不安全,这时候需要在浏览器上安装证书. 一.网页不安全 1.用fiddler ...

  5. Java13新特性 -- 重新实现旧版套接字API

    全新实现的 NioSocketImpl 来替换JDK1.0的PlainSocketImpl. 它便于维护和调试,与 NewI/O (NIO) 使用相同的 JDK 内部结构,因此不需要使用系统本地代码. ...

  6. sql 各种依赖关系解释

    1.数据依赖 数据依赖指的是通过一个关系中属性间的相等与否体现出来的数据间的相互关系,其中最重要的是函数依赖和多值依赖. 2.函数依赖 设X,Y是关系R的两个属性集合,当任何时刻R中的任意两个元组中的 ...

  7. Jeecg 支持多视图设置

    <!-- 视图解析器1:html视图解析器 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的 --> <bean id="freemar ...

  8. 恋恋山城 Jean de Florette (1986) 男人的野心 / 弗洛莱特的若望 / 让·德·弗罗莱特 / 水源 下一部 甘泉，玛侬

    <让·德·弗洛莱特>电影剧本 文/[法]马赛尔·巴涅尔译/苏原 编者按:<让·德·弗洛莱特>和<甘泉,玛侬>是根据法国著名作家马赛尔·巴涅尔的同名小说改编的电影.马 ...

  9. XGBoost中参数调整的完整指南（包含Python中的代码）

    (搬运)XGBoost中参数调整的完整指南(包含Python中的代码) AARSHAY JAIN, 2016年3月1日     介绍 如果事情不适合预测建模,请使用XGboost.XGBoost算法已 ...

  10. Eclipse项目上传和下载到码云上

    本文将介绍如何将本地的项目提交到开源中国的码云(版本控制器)上.改教程讲解过程比较详细,跟着做实现起来很简单.由于自己本身也是一个新手,所以不做过多的解释,只是单纯的描述了该如何去做,大家一起学习共同 ...