<html>
<head>
<meta charset="utf-8">
<title>Swiper轮播</title>
</head>
<body>
<div class="swiper-container" id="Exhibition-swiper" style="width:800px">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:#ffd800;width:100px;height:300px"></div>
<div class="swiper-slide" style="background-color:#ff6a00;width:100px;height:300px"></div>
<div class="swiper-slide" style="background-color:#00ff90;width:100px;height:300px"></div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
</div>
<link href="~/Scripts/swiper-3.4.2/swiper.css" rel="stylesheet" />
<script src="~/Scripts/swiper-3.4.2/swiper.js"></script>
<script type="text/javascript">
window.onload= function InitSwiper() {
mySwiper = new Swiper('#Exhibition-swiper', {
//cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。
effect: 'coverflow',
coverflow: {
//图片做3D旋转是y轴的旋转角度，默认50
rotate: 15,
//每张图片之间的拉伸值，越大图片靠得越近 默认0
stretch: 13,
//每张图片的位置深度，值越大看起来越小 默认100
depth: 60,
//depth和rotate和stretch的倍率，值越大这三个参数的效果越明显 默认1
modifier: 2,
//开启图片阴影 默认true
slideShadows: true,
},
//滑动频率(滑动开始到结束时间)
speed: 1000,
//定时轮播
autoplay: 2500,

//循环
loop: true,
loopAdditionalSlides: 1,

//当前显示多少张轮播图
slidesPerView: 2,
centeredSlides: true,
//轮播图的间距(外边距：margin)
spaceBetween: 30,
});
}
</script>
</body>
</html>

效果图：

记得要下载swipe插件喔！

Swiper插件轮播的更多相关文章

  1. 七、Vue组件库：Element、Swiper（轮播专用组件）

    一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...

  2. 微信小程序之 Swiper（轮播图）

    1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...

  3. (网页)swiper.js轮播图插件

    Swiper4.x使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件.可下载Swiper文件或使用CDN. <!DOCTYPE html&g ...

  4. swiper轮播 swiper整屏轮播

    近期坐了几个移动端 整屏轮播的  效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...

  5. Flutter Swiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter_swiper的GitHub地址:https: ...

  6. MBB类似jquery.bxslider插件轮播效果

    首先,如图一:当打开页面是,产品出现了淡入淡出切换轮播状态,当鼠标点击左边的小图时,就会切换出相对应的大图,当鼠标移开的时候,这个轮播就会停止自动轮播,只有人工手动才能进行切换:是一个不错的体验! 如 ...

  7. Swiper双向轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 跳坑 小程序swiper组件 轮播图片 右边空白问题

    swiper 组件 设置轮播图片时,右侧会出现空白的情况:是因为 swiper组件有默认的 高度和宽度,所以我们在设置图片高度和宽度的同时, 也要为 设置高度和宽度,和高度和宽度样式一样的就可以.

  9. Swiper实现轮播图效果

    为了实现轮播图(carousel)效果或左右滑动显示不同的内容,我们采用Swiper来实现. 需要引入swiper.min.css和swiper.min.js,文件可从https://github.c ...

随机推荐

  1. Koa2学习（九）与mongoDB交互

    Koa2学习(九)与mongoDB交互 数据库下载与安装 windows下载地址:http://dl.mongodb.org/dl/win32/x86_64 linux下载地址:https://www ...

  2. 1分钟看完 jQuery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  3. 编译FreePascal源代码（摘录自邮件询问）

    为了尝试编译FreePascal,我搜了官方文档,并给几位作者都发了邮件询问,目前结果如下: http://wiki.lazarus.freepascal.org/Getting_Lazarus#Co ...

  4. Node.js 101（2）: Promise and async

    --原文地址:http://blog.chrisyip.im/nodejs-101-package-promise-and-async 先回想一下 Sagase 的项目结构: lib/ cli.js ...

  5. swift中的@objc的作用

    转载:https://www.jianshu.com/p/6c5b45d9d042 自动清除冗余代码减小包大小 得益于 Swift 的静态语言特性,每个函数的调用在编译期间就可以确定.因此在编译完成后 ...

  6. CRM 配置 ADFS后，使用自定义STS遇到的问题总结

    1 登录ADFS服务查看 ADFS日志 2 根据日志提示的错误,设置ADFS对应的属性 (Get-ADFSRelyingPartyTrust) | Set-ADFSRelyingPartyTrust  ...

  7. regular expression 在线检测的网站

    http://regexone.com/   学习网站 http://regexone.com/lesson/optional_characters? http://regexone.com/less ...

  8. 配置RabbitMQ远程访问

    本文参考自:http://flashing.iteye.com/blog/1797531 1.如果远程客户端网络状况不是太好,比如adsl什么的,那么一定在客户端打开requstedHeartbeat ...

  9. SERVLET类常用接口及方法

    SERVLET类常用接口及方法 2011-09-09 16:14:43    [size=xx-small]SERVLET类常用接口及方法2007年04月05日 星期四 04:46 P.M.基本类和接 ...

  10. 【SCOI 2003】 严格n元树

    [题目链接] 点击打开链接 [算法] f[i]表示深度小于等于i的严格n元树 显然,一棵深度小于等于i的严格n元树,就是一个根节点,下面有n棵子树,这n棵子树都是深度小于等于i-1的严格n元树,每棵子 ...