使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件：

swiper官方文档：http://www.swiper.com.cn/api/effects/193.html

实例：

示例代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         ul{

             list-style: none;

         }

         .swiper-container {

             width: 600px;

             height: 300px;

             box-sizing: border-box;

         }

         .swiper-slide > a{

             width: 100%;

             display: block;

         }

         .swiper-slide > a > img{

             width: 100%;

             display: block;

         }

     </style>

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

 </head>

 <body>

 <!--需要的是下面这样的结构，而不是下面这样的标签，意味着标签名称可以随意-->

 <div class="swiper-container">

     <ul class="swiper-wrapper">

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l1.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l2.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l3.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l4.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l5.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l6.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l7.jpg" alt="">

             </a>

         </li>

         <li class="swiper-slide">

             <a href="javascript:;">

                 <img src="./images/l8.jpg" alt="">

             </a>

         </li>

     </ul>

 </div>

 <script>

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

         autoplay:2000,//可选选项，自动滑动

         loop : true,

         effect : 'cube',

     })

 </script>

 </body>

 </html>

前端插件--swiper.js的更多相关文章

  1. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

  3. 【QRcode二维码】：使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  4. 前端 解决swiper js 手动滑动一下后不能自动播放

    用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...

  5. 前端插件--swipe.js

    swipe.js的作用: 这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 效果图: 代码: <!DOCTYPE html> <html lang="en&qu ...

  6. iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)

                      上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...

  7. 前端笔记之Vue（七）Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

  8. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  9. swiper.js插件的使用

    swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html>    <he ...

随机推荐

  1. FingerPrint Fuzzy Vault Matlab实践

    本文实践了指纹识别生物特征识别研究论文A Fuzzy Vault Scheme的算法部分.原文请查看以下链接: Juels, A. & Sudan, M. Des Codes Crypt (2 ...

  2. [USACO2005 nov] Grazing on the Run【区间Dp】

    Online Judge:bzoj1742,bzoj1694 Label:区间Dp 题目描述 John养了一只叫Joseph的奶牛.一次她去放牛,来到一个非常长的一片地,上面有N块地方长了茂盛的草.我 ...

  3. Qt---坐标系统

    Qt中经常会访问鼠标的位置,qt中将坐标分为局部坐标,与全局坐标.局部坐标用pos表示,全局坐标用globalPos表示. pos与globalPos区别: globalPos:widget鼠标所在位 ...

  4. 用hexo在本地搭建自己的博客

    参考路径:https://blog.csdn.net/Hoshea_chx/article/details/78826689

  5. thinkphp 表达式查询

    上面的查询条件仅仅是一个简单的相等判断,可以使用查询表达式支持更多的SQL查询语法,也是ThinkPHP查询语言的精髓,查询表达式的使用格式: $map['字段名'] = array('表达式','查 ...

  6. python事件调度库sched

    事件调度 sched模块内容很简单,只定义了一个类.它用来最为一个通用的事件调度模块. class sched.scheduler(timefunc, delayfunc)这个类定义了调度事件的通用接 ...

  7. phpCOW机制详解

    写时复制(Copy-on-Write,也缩写为COW),顾名思义,就是在写入时才真正复制一份内存进行修改. COW最早应用在*nix系统中对线程与内存使用的优化,后面广泛的被使用在各种编程语言中,如C ...

  8. IDEA中Git的使用(多人合作)

    首先我们要简单知道github跟Git的区别.git是版本控制工具, github是一个面向开源及私有软件项目的托管平台,也是程序员交流的地方. 接下来就开始讲怎么多人一起开发. 首先我们先拥有git ...

  9. sip会话流程以及sip介绍（1）

    参考连接 :https://www.2cto.com/kf/201609/546336.html https://www.w3cschool.cn/session_initiation_protoco ...

  10. Python学习day11-函数基础(1)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...