<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. HDU 5302(Connect the Graph- 构造)

    Connect the Graph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  2. mac上为nginx打开防火墙

    1 nginx的路径必须是物理路径,不能是链接 2 执行下面的两个命令后重启电脑 命令 sudo /usr/libexec/ApplicationFirewall/socketfilterfw --a ...

  3. VCL代码的一些设计手法（使用OO虚函数的技巧）

    1. 抽象类法(VCL不推荐):第一,允许创建抽象类对象,因为语法没问题,但允许其错误.第二,接口更好.第三,如果是混合抽象类,则推荐Place Holder方法2. Place Holder(占位) ...

  4. windows系统下mysql5.5查看和设置数据库编码

    1.显示当前编码命令: show variables like 'char%'; 2.设置编码为utf8命令:set names 'utf8';

  5. I.MX6Q MfgTool2 ucl2.xml eMMC

    /**************************************************************************** * I.MX6Q MfgTool2 ucl2 ...

  6. 浅入分析和Linux内核相关的文件夹/proc和/sys .

    近来文章被踩的厉害,我只想把自己从马哥学的知识自己总结下发到博客里,但是没想到昨天一篇文章刚发一上午被踩了9次...如果您真的觉得我的文章很烂,请告诉我原因,不胜感激. 这星期,马哥讲了关于Linux ...

  7. C++实现二叉树（建树，前序，中序，后序）递归和非递归实现

    #include<iostream> #include<string.h> #include<stack> using namespace std; typedef ...

  8. IPC进程之间通信的几种方式

    概念 进程间通信就是在不同进程之间传播或交换信息,那么不同进程之间存在着什么双方都可以访问的介质呢?进程的用户空间是互相独立的,一般而言是不能互相访问的,唯一的例外是 共享内存区 .但是,系统空间却是 ...

  9. bzoj 2438: [中山市选2011]杀人游戏【tarjan】

    没看太懂题意orz 最优的是tarjan缩点之后问入度为0的点,因为问这个点可以知道整个块的情况 答案是这ans个入度为0的点都不是杀手的概率\( \frac{n-ans}{n} \) 但是有特殊情况 ...

  10. bzoj 1699: [Usaco2007 Jan]Balanced Lineup排队【st表||线段树】

    要求区间取min和max,可以用st表或线段树维护 st表 #include<iostream> #include<cstdio> using namespace std; c ...