<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            .swiper-container {

                width: 600px;

                height: 300px;

                text-align: center;

                line-height: 300px;

            }

            .swiper-slide {

                background: black;

                color: white;

            }

        </style>

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

    </head>

    <body>

        <div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide">1</div>

                <div class="swiper-slide">2</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="swiper-4.5.0/dist/js/swiper.js" type="text/javascript" charset="utf-8"></script>

        <script>

            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',

                },

            })

        </script>

    </body>

</html>

Swiper4.x使用方法的更多相关文章

  1. (网页)swiper.js轮播图插件

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

  2. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

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

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

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

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

  5. Swiper使用方法（向前和向后按钮在swiper-container外面）

    Swiper插件的使用 1.HTML <!-- Swiper --> <section class="swipper"> <div class=&qu ...

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

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

  7. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  8. 【.net 深呼吸】细说CodeDom（6）：方法参数

    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...

  9. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

随机推荐

  1. React 虚拟 DOM 的差异检测机制

    React 使用虚拟 DOM 将计算好之后的更新发送到真实的 DOM 树上,减少了频繁操作真实 DOM 的时间消耗,但将成本转移到了 JavaScript 中,因为要计算新旧 DOM 树的差异嘛.所以 ...

  2. MyISAM加锁分析

    为什么加锁 你正在读着你喜欢的女孩递给你的信,看到一半的时候,她的好闺蜜过来瞄了一眼(假设她会隐身术,你看不到她),她想把"我很喜欢你"改成"我不喜欢你",刚把 ...

  3. 使用JS+Three.js+Echart开发商场室内地图客流信息统计功能

    现在的商场管理者在管理商场的同时面临着一些无法避免的问题比如:人员监管不到位.效率低下.商场同质化严重,人流量少等.发现了这些问题作为开发人员的我们怎能视而不见,我们的责任就是发现问题解决问题,提供更 ...

  4. MVC页面扩展方法 单例模式

    MVC页面扩展方法    单例模式    /// <summary>         /// 创建一个Config内容对象         /// </summary>     ...

  5. BFS(广度优先搜索)

    简介 BFS的过程是首先访问起始结点v,接着访问顶点v的所有未被访问的邻接结点,然后对每个继续进行上述步骤,直到所有结点都被访问过为止,当然,在访问过程中,需要使用一个队列,然后类似二叉树的层次遍历来 ...

  6. openlayers4 入门开发系列之船讯篇

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. UiPath针对SAP的输入技巧

    我观察到在SAP中不论是SimulateType,还是SendWindowMessages,Type Into的输入速度都很慢(是逐个字符输入的).如果只是一次两次的输入倒也没什么,但如果是需要批量多 ...

  8. 基于geoserver的REST服务完成mysql数据源动态发布

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 在之前的<简析GeoServer服务的内部文件组织以及 ...

  9. python3 变量理解 解释器理解 常量理解 用户交互理解 逻辑运算

    先来条NLP再说...... 九,每人都已经具备使自己快乐的资源 每一个人都有过成功快乐的体验,也即是说有使自己快乐的能力. 人类只用了大脑能力极少部分,提升大脑的运用,很多新的突破便会出现. 运用大 ...

  10. vue.js window.removeEventListener 移除

    vue项目中的小坑记录下,想要移除window的addEventListener,需要把后面的function挂在到this上,removeEventListener 和 addEventListen ...