<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. JavaScript-创建第一个自己的类库

    通过上一节面向对象和原型的学习. 我们知道了怎样创建一个类,包含类的私有化属性和方法.公有化属性和方法.静态属性和方法.在这里略微回想一下.首先要创建一个类能够通过1.new object().2.利 ...

  2. Ubuntu16.04下安装Tensorflow GPU版本（图文详解）

    不多说,直接上干货! 推荐 全网最详细的基于Ubuntu14.04/16.04 + Anaconda2 / Anaconda3 + Python2.7/3.4/3.5/3.6安装Tensorflow详 ...

  3. 行转列--Excel和数据库的完美结合

    入职到如今已经有一段时间了,除了不断完好新功能外,线上运维也是一项非常重要的任务,每天都须要占用一 定量的时间来处理,这时候如何高效准确的来解决这些问题是非常值得考虑的.       今天客服人员给我 ...

  4. Posting array of JSON objects to MVC3 action method via jQuery ajax

    Does the model binder not suport arrays of JSON objects? The code below works when sending a single ...

  5. （1）iOS9完美越狱

    方式一:同步推越狱,其实用的也是方式二 参考:iOS9.3.5不完美越狱(点击跳转) 方式二:使用impactor越狱. 下载地址:http://www.pc6.com/mac/505285.html

  6. Android连接wifi，调用系统API【转】

    本文转载自:http://blog.csdn.net/aaa1050070637/article/details/54136472 直接上代码,简单粗暴,一看就懂 import android.con ...

  7. YTU 2982: 奔跑吧，小明！

    2982: 奔跑吧,小明! 时间限制: 1 Sec  内存限制: 128 MB 提交: 36  解决: 2 题目描述 小明陷入一个充满陷阱的密道之中,现在他要逃脱这里!到达密道的出口即可离开这处绝境! ...

  8. 杂项：Java un

    ylbtech-杂项:Java 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech. ...

  9. QT笔记1

    1 第一个就是helloworld窗体啦 #include <qapplication.h> #include <qpushbutton.h> int main( int ar ...

  10. bzoj 2423: [HAOI2010]最长公共子序列【dp+计数】

    设f[i][j]为a序列前i个字符和b序列前j个字符的最长公共子序列,转移很好说就是f[i][j]=max(f[i-1][j],f[i][j-1],f[i-1][j-1]+(a[i]==b[j])) ...