使用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. Android开发 LevelListDrawable详解

    前言 此篇博客正在施工中... 作者其实就是想挖个坑备忘一下... 十分抱歉, 可以参考https://www.jianshu.com/p/f9ec65241b6b

  2. [转].NET Framework 4.5 五个很棒的特性

    自.NET 4.5发布已经过了差不多1年了.但是随着最近微软大多数的发布,与.NET开发者交流的问题显示,开发者仅知道一到两个特性,其他的特性仅仅停留在MSDN并以简单的文档形式存在着. 比如说,当你 ...

  3. 「题解」：[POJ2942]Knights of the Round Table

    问题 E: Knights of the Round Table 时间限制: 1 Sec  内存限制: 256 MB 题面 题目描述 作为一名骑士是一个非常有吸引力的职业:寻找圣杯,拯救遇难的少女,与 ...

  4. 线性dp——求01串最大连续个数不超过k的方案数，cf1027E 好题！

    只写了和dp有关的..博客 https://www.cnblogs.com/huyufeifei/p/10351068.html 关于状态的继承和转移 这题的状态转移要分开两步来做: 1.继承之前状态 ...

  5. 第十四章 Odoo 12开发之部署和维护生产实例

    本文中将学习将 Odoo 服务器作为生产环境的基本准备.安装和维护服务器是一个复杂的话题,应该由专业人员完成.本文中所学习的不足以保证普通用户创建应对包含敏感数据和服务的健壮.安全环境. 本文旨在介绍 ...

  6. linux 每天一个命令

    Nginx [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)  使用命令关闭占用80端口的程序 sudo fuser ...

  7. 微信小程序连续旋转动画this.animation.rotate

    一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一 ...

  8. JDK源码阅读--HashMap

    public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, ...

  9. 元素显示v-show

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  10. Django 异步任务、定时任务Celery

    将任务分配给其他的进程去运行,django的主进程只负责发起任务,而执行任务的不在使用django的主进程.Python有一个很棒的异步任务框架,叫做celery. Django为了让开发者开发更加方 ...