<!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. Scala 隐式转换及应用

    什么是隐式转换 我们经常引入第三方库,但当我们想要扩展新功能的时候通常是很不方便的,因为我们不能直接修改其代码.scala提供了隐式转换机制和隐式参数帮我们解决诸如这样的问题. Scala中的隐式转换 ...

  2. LVM 移除PV步骤

    1.先查看需要收缩文件系统的使用情况,收缩后的文件系统空间不能小于已经使用的空间 df -hT 2.卸载需要收缩的文件系统(以/dev/vg0/lvm1为例) umount /dev/vg0/lvm1 ...

  3. 深入学习Redis（3）：主从复制

    前言 在前面的两篇文章中,分别介绍了Redis的内存模型和Redis的持久化. 在Redis的持久化中曾提到,Redis高可用的方案包括持久化.主从复制(及读写分离).哨兵和集群.其中持久化侧重解决的 ...

  4. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

  5. 『这是一篇干货blog』

    更新记录一些很好的干货博客以及工具网站. 各文章,工具网站版权归原作者所有,侵删. Articles 浅谈C++ IO优化--读优输优方法集锦 浅谈斜率优化 思维导图好助手--开心食用Xmind Ty ...

  6. Ubuntu命令用法详解——curl命令

    简介: cURL(CommandLine Uniform Resource Locator)是一个利用URL语法在命令行下工作的文件传输工具,1997年首次发行.它支持文件上传和下载,所以是综合传输工 ...

  7. Java8新特性之二：方法引用

    上一节介绍了Java8新特性中的Lambda表达式,本小节继续讲解Java8的新特性之二:方法引用.方法引用其实也离不开Lambda表达式. 1.方法引用的使用场景 我们用Lambda表达式来实现匿名 ...

  8. .Net 特性 attribute 学习 ----自定义特性

    什么是特性? [Obsolete("不要用无参构造函数",true)] 放在方式上, 该方法就不能使用了  [Serializable]放在类上面.该类就是可以序列化和反序列化使用 ...

  9. 高通QCC3026蓝牙音频芯片处理器介绍

    QCC3026是一款基于超低功耗架构的入门级闪存可编程蓝牙音频SoC,专为紧凑型功能优化的Qualcomm TrueWireless耳塞而设计.QCC3026旨在为我们的客户提供有助于缩短开发时间并具 ...

  10. postgresql 添加uuid扩展

    去年用EF Core做数据迁移到psql数据库的时候遇到了缺失uuid的错误,当时帅气的脸蛋突然懵逼了.现记录一下 以备参考. 环境:Centos7.2  psql  Xshell Xshell连接C ...