<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. centos7 64位系统jdbc连接oracle报错问题

    这两天发生了一个错误,记录下来. 报错如下: ### Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could n ...

  2. 大话设计模式C++实现-第14章-观察者模式

    一.UML图 关键词:Subject维护一个Observer列表.Subject运行Notify()时就运行列表中的每一个Observer的Update(). 二.概念 观察者模式:定义了一种一对多的 ...

  3. swift语言初见

    下面是swift得基础语法部分内容 //  main.swift //  helloSwift // //  Created by cyteven on 14-7-23. //  Copyright ...

  4. 每天进步一点点—mysql-mysqldump

    一.        简单介绍 mysqldump是client用来备份数据库或者在不通数据库之间进行数据迁移的工具,备份内容包括创建表或者装载表的SQL语句 二.       命令格式   备份单个数 ...

  5. activity.runOnUiThread（）内的run（）方法没有被执行

    activity.runOnUiThread(new Runnable() { public void run() { Toast.makeText(context, toast, Toast.LEN ...

  6. Iphone 启动图的尺寸

    APP图标设置 - 取Images.xcassets中的AppIcon, 图标尺寸 29pt * 2x => 58 * 5829pt * 3x => 87 * 8740pt * 2x =& ...

  7. DIV居中显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. vs2010统计代码行数

    参考:http://www.cnblogs.com/zfanlong1314/archive/2013/03/08/2950100.html 正则表达式:^:b*[^:b#/]+.*$ 文件类型:*. ...

  9. Swift4 可选型, 可失败的构造函数

    创建: 2018/02/25 完成: 2018/02/26 更新: 补充类内可选型属性不初始化自动设为nil [任务表]TODO  可选型  可选型与nil 可选型声明方法 var 属性: 类型? / ...

  10. OKEX websocket API 连接Python范例

    因为 websocket-client 新版的各种大脑降级设计 很多功能无法使用需要安装老版本websocket-client的包才能正常使用 pip3 install websocket-clien ...