使用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. 安卓中 使用html来使文字变色Html.fromHtml

    在这里  我是用的html使文字的个别颜色变红 String textStr = " 本课程为<font color=\"#FF0000\">" + ...

  2. Apache服务器中运行CGI程序的方法,文中以Perl脚本作为示例

    关于apache与CGI在这里就不解释了． 1.apache下面以2.0.63为例介绍运行CGI程序的配置.(http://www.nklsyy.com) 2.下载Windows下的Perl解释器Ac ...

  3. 洛谷P2526 【SHOI2001】小狗散步

    原题传送门 题目背景 Grant喜欢带着他的小狗Pandog散步.Grant以一定的速度沿着固定路线走,该路线可能自交.Pandog喜欢游览沿途的景点,不过会在给定的N个点和主人相遇.小狗和主人同时从 ...

  4. android 头像选择以及裁剪

    一.布局申明 <ImageView android:id="@+id/head_image" android:layout_width="80dp" an ...

  5. 洛谷P5104 红包发红包

    题目链接: P5104 题目分析: 题目和\(n\)是没什么关系的,因为是\(n\)个人抢,其实不一定抢完 其实很显然--就是求一个连续型随机变量的期望 首先设一个随机变量\(X\),表示第一个人拿到 ...

  6. Vue.js项目部署到服务器

    1.申请服务器 2.配置Xshell 3.在服务器手动建自己的根目录,把根目录的文件名复制给项目里面config下面的index.js 4.项目开始打包 npm run build 5.打包完成之后把 ...

  7. CCPC-Wannafly Summer Camp 2019 全记录

    // 7.19-7.29 东北大学秦皇岛校区十天训练营,题目都挂在了Vjudge上.训练期间比较忙,没空更博总结,回来继续补题消化. Day1 这天授课主题是简单图论,节奏挺好,wls两小时理完图论里 ...

  8. Cocos2d-x发布Android.mk 导入所有cpp

    #traverse all the directory and subdirectorydefine walk $(wildcard $(1)) $(foreach e, $(wildcard $(1 ...

  9. mysql批量增加表中新列存储过程

    一般访问量比较大的网站,请求日志表都是每天一张表独立创建. 业务需要为每张表都添加一个新列,纠结了半天,写了个存储过程如下: 日志表结构类型 tbl_ads_req_20140801, tbl_ads ...

  10. 廖雪峰Java11多线程编程-1线程的概念-3线程的状态

    1线程的状态 线程终止的的原因: run()或call()方法执行完成,线程正常结束 线程抛出一个未捕获的Exception或Error 直接调用该线程的stop()方法来结束该线程--该方法容易导致 ...