<!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. python接口自动化（十九）--Json 数据处理---实战（详解）

    简介 上一篇说了关于json数据处理,是为了断言方便,这篇就带各位小伙伴实战一下.首先捋一下思路,然后根据思路一步一步的去实现和实战,不要一开始就盲目的动手和无头苍蝇一样到处乱撞,撞得头破血流后而放弃 ...

  2. 给女朋友讲解什么是Optional【JDK 8特性】

    前言 只有光头才能变强 前两天带女朋友去图书馆了,随手就给她来了一本<与孩子一起学编程>的书,于是今天就给女朋友讲解一下什么是Optional类. 至于她能不能看懂,那肯定是看不懂的.(学 ...

  3. android事件分发源码分析—笔记

    昨天晚上从源码角度复习了一下android的事件分发机制,今天将笔记整理下放在网上.其实说复习,也是按着<android开发艺术探索>这本书作者的思路做的笔记. 目录 事件是如何从Acti ...

  4. 粮草先行——Android折叠屏开发技术点（二）

    继该系列的第一篇和番外篇之后,今天我们来聊一聊多窗口开发的注意事项.实际上,与其说"多窗口开发",不如说让我们的APP适应多窗口模式. 可能有朋友会问,为什么要提到多窗口模式呢? ...

  5. DateUtil日期工具类

    目录 (1)需要导入的包 (2)DateUtil类 (1)需要导入的包 主要用于Strings.isNullOrEmpty(date) <!--string处理类--> <depen ...

  6. 排错：Windows系统异常导致Filebeat无法正常运行

    Windows 下Filebeat排错Case实例一份,请查收. 问题描述: Windows Server下Filebeat Agent服务无法正常启动,导致网络数据打点无法正常进行,影响大范围用户网 ...

  7. LeetCode算法题-Toeplitz Matrix（Java实现）

    这是悦乐书的第312次更新,第333篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第181题(顺位题号是766).如果从左上角到右下角的每个对角线具有相同的元素,则矩阵是 ...

  8. pgsql sql 统计整理

    字符字段转整型查询: SELECT mon_id as staTime,SUM (CAST ( index_value AS INT )) AS totalCount FROM aidata.rep_ ...

  9. java使用SSH连接Linux系统

    SSH连接linux系统使我们在开发项目中常用到的,现在留下来,做个记录 package com.log; import java.io.BufferedReader; import java.io. ...

  10. 迷茫<第四篇：这两年>

    时间匆匆而过,不知不觉已经是到北京的第二个年头,又到年末,2017年接近了尾声,提前预祝各位看官元旦节快乐! 今年3月份跳槽了一次,4月份以高级开发工程师职位进来现在的公司一直工作到现在,没有以前那么 ...