<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>swiper</title>
<link href="dist/css/swiper.min.css" rel="stylesheet">
</head>
<body>
<div style="width:640px; margin:20px auto;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="###"><img src="images/banner01.jpg"></a></div>
<div class="swiper-slide"><a href="###"><img src="images/banner02.jpg"></a></div>
<div class="swiper-slide"><a href="###"><img src="images/banner03.jpg"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="dist/js/swiper.min.js"></script>
<script>
$(function(){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.swiper-pagination',//当前位置的图片点
speed: 400,
loop:true,//是够能够循环无缝滑动
grabCursor: true,
paginationClickable: true,//允许触摸
autoplay:1000//一秒切换
})
});
</script>
</body>
</html>
效果图：
相关推荐
淘宝swiper轮播 小图变大图 没有让未激活的图片旋转
前端开发swiper焦点图实例，类似于https://www.swiper.com.cn/demo/web/index.html所示效果。
swiper实现当前轮播图放大效果，类似芒果tv，货拉拉实现效果，自己整理修改了很多次，希望能给有效地帮助
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了，下面就来开始本文的正文内容 实现过程： 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
轮播图demo，一屏显示三张图片，中间图片放大，两边图片缩小效果。技术是基于swiper的轮播图，提供给大家参考。
swiper轮播图的基本使用，已处理移动端刷新页面和返回页面轮播图出错问题。
该轮播图一屏显示三张图片，中间图片放大，两边图片缩小效果。基于swiper的完美轮播图，提供给大家参考！效果图参考：https://blog.csdn.net/qq_20757489/article/details/101024851
swiper轮播图。1
在jquery中使用swiper轮播图，我的博客中tab中显示嵌套的轮播图，tab中嵌套不同的轮播图，这是一个swiper.js代码文件
swiper轮播图demo示例代码
2018年03月20日，项目中要实现一个比较有意思的轮播效果（这个页面要实现好几个轮播），[线上地址](http://http://www.risfond.com/bdm)，Swiper一直用的很顺手，于是继续用Swiper，效果图如下。实际效果一点都不...
轮播共转插件，分为两块，导航模块可以随着图片模块滑动轮转而调到特定导航按钮（按钮可自定义，如：图片）。超出屏幕的导航块会自动跳转回来。
使用Swiper 插件实现 类似于轮播图的视频轮播 轮播图
swiper轮播图分页器样式修改
swiper插件点击图片查看大图幻灯片效果可左右轮播切换代码，swiper选项卡，swiper滚动，swiper放大
一款同时兼容电脑手机端的swiper响应式图片轮播代码，基于swiper的自适应网站焦点图轮播效果。支持按钮控制切换。
网页模板——基于Swiper轮播图切换特效 8种
videojs+swiper实现淘宝商品详情轮播图.docx
基于Swiper轮播图切换特效 8种.zip