使用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. Codeforces Round #479 (Div. 3) 题解 977A 977B 977C 977D 977E 977F

    A. Wrong Subtraction 题目大意:   定义一种运算,让你去模拟 题解:   模拟 #include <iostream> #include <cstdio> ...

  2. CSS - 定位相关

    定位 (position) 1. 相对定位 (relative) 相对于元素原来的位置进行移动 2. 绝对定位 (absolute) 如果父级元素中有相对定位属性, 则参照父级元素进行定位, 默认参照 ...

  3. 莫烦pytorch学习笔记(二)——variable

    .简介 torch.autograd.Variable是Autograd的核心类,它封装了Tensor,并整合了反向传播的相关实现 Variable和tensor的区别和联系 Variable是篮子, ...

  4. Joomla - 权限系统（访问权限限制）

    Joomla - 权限系统,以下以全局配置的权限设置为例,每个扩展都有自己的权限设置

  5. Spring Cloud Eureka 使用外网IP和端口号进行服务注册

    应用场景如下: 服务提供方(即要注册到服务中心的服务)的内网地址,外界无法访问(或者使用docker等做了应用端口等的配置),做了IP映射后,公网IP49.10.22.106映射到服务提供方的内网ip ...

  6. Leetcode962. Maximum Width最大宽度坡 Ramp

    给定一个整数数组 A,坡是元组 (i, j),其中  i < j 且 A[i] <= A[j].这样的坡的宽度为 j - i. 找出 A 中的坡的最大宽度,如果不存在,返回 0 . 示例 ...

  7. object and namespace

    http://effbot.org/zone/python-objects.htm 几点总结: (1) 类的基本属性 . id, returned by id(obj) . type, returne ...

  8. 阿里云数据库再获学术顶会认可，一文全览VLDB最新亮点

    一年一度的数据库领域顶级会议VLDB 2019于当地时间8月26日-8月30日在洛杉矶圆满落幕.在本届大会上,阿里云数据库产品团队浓墨登场,不仅有多篇论文入选Research Track和Indust ...

  9. HZOI20190813 B，任（duty）

    题面:去一个神奇的网页:https://www.cnblogs.com/Juve/articles/11352426.html 听说打O(nmq)有70 但是显然博主只有50分 考点:前缀和的综合应用 ...

  10. Django项目：CRM(客户关系管理系统)--79--69PerfectCRM实现CRM业务流程(bpm)学生讲师分页

    # student_views.py # ————————60PerfectCRM实现CRM学生上课记录———————— from django.shortcuts import render #页面 ...