使用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. Python全栈开发：XML与parse对比

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ ET.XML和ET.parse的对比 1.返回对象差异: ET.XML: ...

  2. Python3基础笔记_迭代器

    # Python3 迭代器与生成器 import sys ''' 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开 ...

  3. webpack静态资源拷贝插件

    处理不需要使用webpack统一打包处理或webpack不支持的文件 安装 npm install copy-webpack-plugin --save-dev 配置 const copyWebpac ...

  4. git difff

    Generate patch through git diff http://stackoverflow.com/questions/1191282/how-to-see-the-changes-be ...

  5. mysql内建命令快速手记 — 让手指跟上思考的速度（一）

    在微信公众号上看到一篇文章说的很好,意思是说,大牛在尝试各种方案的时候可能并没有超神的预测和筛选能力 只是你通常测试一种情况时,大神已经测试了好几种方案了,讲的是"为什么大多数程序员不喜欢写 ...

  6. js (function(){}()),(function(){})(),$(function(){});之间的区别

    参考:https://blog.csdn.net/stpice/article/details/80586444 (function(){}()), (function(){})() 均为立即执行函数 ...

  7. vue 监听返回

    mounted: function() { //使用keep-alive时可以放在activated内 if (window.history && window.history.pus ...

  8. Redis高级命令的使用学习

  9. Linux设置复制粘帖的快捷方式

    一.快捷设置 安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘 ...

  10. Python学习之enumerate

         enumerate还可以接收第二个参数,用于指定索引起始值   2.     注意open返回文件对象,可迭代,而os.open返回的是文件指针,int类型, <wiz_tmp_tag ...