<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. Nginx系列三 内存池的设计

    Nginx的高性能的是用非常多细节来保证,epoll下的多路io异步通知.阶段细分化的异步事件驱动,那么在内存管理这一块也是用了非常大心血.上一篇我们讲到了slab分配器,我们能够能够看到那是对共享内 ...

  2. 深度学习笔记之目标检测算法系列（包括RCNN、Fast RCNN、Faster RCNN和SSD）

    不多说,直接上干货! 本文一系列目标检测算法:RCNN, Fast RCNN, Faster RCNN代表当下目标检测的前沿水平,在github都给出了基于Caffe的源码. •   RCNN RCN ...

  3. The Pilots Brothers&#39; refrigerator-DFS路径打印

    I - The Pilots Brothers' refrigerator Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format ...

  4. easyUI的tree

    前端使用easyUI,放了一个tree,搞死了. easyUI的tree,后端传过来的数据,是json格式:然后easyUI向后端提交.请求时,会自动将节点的id附在url后面. 主要有两个注意的地方 ...

  5. linux driver开发

    1 开发linux driver时的调试思路 基本上是打印调试,原因很简单,方便.或者使用工具挂住cpu.

  6. YTU 2983: 小明的生机！

    2983: 小明的生机! 时间限制: 1 Sec  内存限制: 128 MB 提交: 16  解决: 2 题目描述 小明陷入一个充满陷阱的密道之中,现在他要逃脱这里!到达密道的指定位置即可离开这处绝境 ...

  7. 苹果Instruments/Shark性能调试工具概述

    在Mac OS X上你可以使用Gprof这样的UNIX工具用于测试程序性能.当然,Apple也有自己的Profiling Tools,用得比较多的是Shark.10.5里还引入了一个基于DTrace的 ...

  8. [Codeforces 507E] Breaking Good

    [题目链接] https://codeforces.com/contest/507/problem/E [算法] 首先BFS求出1到其余点的最短路 , N到其余点的最短路,记为distA[]和dist ...

  9. 【HAOI 2007】 上升序列

    [题目链接] 点击打开链接 [算法] 先预处理 : 将序列反转,求最长下降子序列 对于每个询问,根据字典序性质,贪心即可 [代码] #include<bits/stdc++.h> usin ...

  10. Linux 系统管理命令 - iotop - 动态显示磁盘 I/O 统计信息

    命令详解 重要星级: ★★★★☆ 功能说明: iotop 命令是一款实时监控磁盘 I/O 的工具, 但必须以 root 用户的身份运行.使用 iotop 命令可以很方便的查看每个进程使用磁盘 I/O ...