<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/swiper.min.css">
</head>
<body>
...
<script src="path/swiper.min.js"></script>
</body>
</html>
 
案例一:banner广告图片轮播

html如下
注(swiper-开头的class名称都是插件自带样式的,需要加上)
 <div class="banner-container swiper-container">
<div class="swiper-wrapper">
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg01.png"></a>
</div>
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg02.png"></a>
</div>
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg03.png"></a>
</div>
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg04.png"></a>
</div>
</div>
  <!--需要焦点按钮时加这段div-->
<div class="banner-pagination pagination">
<span></span>
</div>
</div>
js如下:
 <script type="text/javascript">
var mySwiper = new Swiper('.banner-container',{
loop: true, //用来循环播放
pagination: '.banner-pagination', //显示焦点按钮
paginationClickable: '.banner-pagination', //焦点按钮可点击
});
setInterval("mySwiper.slideNext()", 2000); //加定时器的目的是:点击焦点按钮后,自动播放你所点击的那张图片的下一张
</script>

案例二:无缝滑动(不知道叫什么)

html如下
注(swiper-开头的class名称都是插件自带样式的,需要加上)
 <div class="store-container swiper-container">
<div class="swiper-wrapper">
<!--swiper-slide为一本书-->
<div class="swiper-slide">
<dl>
<dt>
<img src="data:images/book/book01.png" />
</dt>
<dd>
<h6>我怀疑人们在密谋让我幸福</h6>
<span>张玮佳</span>
<p>当我们谈起生活时当我们谈起生活时,我们谈什么?事儿,谎言,习惯,欲望,面子,嫉妒。</p>
</dd>
</dl>
</div>
<!--swiper-slide为一本书-->
<div class="swiper-slide">
<dl>
<dt>
<img src="data:images/book/book02.png" />
</dt>
<dd>
<h6>世界上有趣的事太多</h6>
<span>张玮佳</span>
<p>当我们谈起生活时,我们谈什么?事儿,谎言,习惯,欲望,面子,嫉妒。</p>
</dd>
</dl>
</div>
<!--swiper-slide为一本书-->
<div class="swiper-slide">
<dl>
<dt>
<img src="data:images/book/book06.png" />
</dt>
<dd>
<h6>舍得,舍不得</h6>
<span>蒋勋</span>
<p>当我们谈起生活时,我们谈什么?事儿,谎言,习惯,欲望,面子,嫉妒。</p>
</dd>
</dl>
</div>
</div>
</div>
js如下:
 <script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 'auto',
spaceBetween: 24,
});
</script>
案例三:无缝滑动2(不知道叫什么)
html如下
注(swiper-开头的class名称都是插件自带样式的,需要加上)
 <div class="column-container swiper-container">
<div class="column-wrapper swiper-wrapper">
<div class="column-slide swiper-slide">
<a href="bookClassify.html">
<div class="column-bg">
<img src="data:images/column/columnImg01.png" />
</div>
<p>分类</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="newBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg03.png" />
</div>
<p>新书</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="freeBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg02.png" />
</div>
<p>免费</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="hotSale.html">
<div class="column-bg">
<img src="data:images/column/columnImg04.png" />
</div>
<p>热销</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="store.html">
<div class="column-bg">
<img src="data:images/column/columnImg05.png" />
</div>
<p>书店</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="bookClassify.html">
<div class="column-bg">
<img src="data:images/column/columnImg01.png" />
</div>
<p>分类</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="newBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg03.png" />
</div>
<p>新书</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="freeBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg02.png" />
</div>
<p>免费</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="hotSale.html">
<div class="column-bg">
<img src="data:images/column/columnImg04.png" />
</div>
<p>热销</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="store.html">
<div class="column-bg">
<img src="data:images/column/columnImg05.png" />
</div>
<p>书店</p>
</a>
</div>
</div>
<!--需要焦点按钮时加这段div-->
<div class="column-pagination pagination">
<span></span>
</div>
</div>
js如下:
 <script type="text/javascript">
var mySwiper = new Swiper('.column-container',{
loop: true, //用来循环播放
pagination: '.column-pagination',
slidesPerView: 'auto',
paginationClickable: true,
slidesPerGroup: 5, //每次滑动5个
speed: 600 //滑动的速度
});
</script>

(本文原创,转载请注明出处!!)

Swiper.js使用方法的更多相关文章

  1. js文件中模块化导入swiper.js文件方法

    es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...

  2. Swiper教程 —— 使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  3. 移动端开发(四):swiper.js

    swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js    是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...

  4. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  5. 全屏使用swiper.js过程中遇到的坑

    概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...

  6. swiper.js 多图片页面的懒加载lazyLoading

    swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...

  7. swiper.js的使用

    点击api文档地址, (1)图片轮播banner <script src="js/jquery-2.1.4.min.js"></script> <sc ...

  8. swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

    使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...

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

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

随机推荐

  1. 2017年8月28日 HTML/CSS 语法(待填坑)

    今天这种节日真的是 ----------------------------------------------------------- HTML  

  2. node.js后台快速搭建在阿里云(一)(express篇)

    前期准备 阿里云服务器 node.js pm2 express nginx linux(推荐教程:鸟哥的私房菜) 简介 嗯……我只是个前端而已 前段时间写过一个.net mvc的远程发布,关于.net ...

  3. jQuery选中下拉列表,输出值

    jQuery部分: $("#form1 select").change(function () { var s=[]; $("#form1 select :selecte ...

  4. 将位图导入为ArcGIS面要素

    本文根据笔者经验,介绍一种从位图图像导入ArcGIS称为要素的方法.这种方法适用于从现有出版物图片中获取地理信息的情况. 首先要说明的是,从位图导入要素是非常非常不精确的方式,如果有其它数据来源,那么 ...

  5. 聊聊并发-Java中的Copy-On-Write容器

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp78   聊聊并发-Java中的Copy-On-Write容器   Cop ...

  6. Calico 的网络结构是什么?- 每天5分钟玩转 Docker 容器技术(68)

    上一节我们部署了 Calico 网络,今天将运行容器并分析 Calico 的网络结构. 在 host1 中运行容器 bbox1 并连接到 cal_net1: docker container run ...

  7. 垂直居中小记 line-height table vertical-align:middle

    垂直居中分两种情况:1.父元素高度确定的单行文本        2.以及父元素高度确定的多行文本. 1.垂直居中-父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line ...

  8. 使用JSR-303进行校验 @Valid

    一.在SringMVC中使用 使用注解 1.准备校验时使用的JAR validation-api-1.0.0.GA.jar:JDK的接口: hibernate-validator-4.2.0.Fina ...

  9. 结对编程1 —— 基于GUI和Swing的四则运算题目生成器

    合作伙伴 201421123102 王艳秋 201421123106 陈 雄 代码地址 题目描述 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI( ...

  10. 201521123082 《Java程序设计》第6周学习总结

    201521123082 <Java程序设计>第6周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念 ...