<!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title></title>

     <link href="~/Scripts/Swiper/swiper.min.css" rel="stylesheet" />

     <script src="~/Scripts/Swiper/swiper3.4.2.min.js"></script>

 </head>

 <body>

     <div class="swiper-container">

         <div class="swiper-wrapper">

             <div class="swiper-slide"><img src="123.png"/></div>

             <div class="swiper-slide"><img src="123.png"/></div>

             <div class="swiper-slide"><img src="123.png"/></div>

         </div>

     </div>

     <script>

         var mySwiper = new Swiper('.swiper-container', {

             autoplay: ,

             speed: ,

             loop:true,//loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换

             direction: 'vertical',//改变轮播方向

             slidesPerView: ,//设置slider容器能够同时显示的slides数量

             observer: true, //修改swiper自己或子元素时，自动初始化swiper

             observeParents: true //修改swiper的父元素时，自动初始化swiper

         });

     </script>

 </body>

 </html>
loop，这个属性设置的话会复制若干个slide
observer，observeParents这两个属性在初始化上有关键作用
												


											
swiper遇到的问题的更多相关文章
	

    
						
  1. swiper插件 纵向内容超出一屏解决办法
		
    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...
    
		
    2. 
						
  2. swiper的初步使用
		
    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...
    
		
    3. 
						
  3. 关于移动端swiper的2种样式重置
		
    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...
    
		
    4. 
						
  4. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
		
    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
    
		
    5. 
						
  5. swiper框架，实现轮播图等滑动效果
		
    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.
    
		
    6. 
						
  6. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
		
        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
    
		
    7. 
						
  7. swiper横向轮播--3d
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    8. 
						
  8. swiper横向轮播（兼容IE8）
		
    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. Swiper说明&&API手册 【中文手册Swiper】
		
     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
    
		
    10. 
						
  10. Swiper 中文API手册（share）
		
    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 一个空格引起的错误。 python
			
    'render_field' tag requires a form field followed by a list of attributes and values in the form att ...
    
			
    2. 
						
  2. 微信跳转外部浏览器下载app
			
    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接和下载APP,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 方案实现教程:http://sk ...
    
			
    3. 
						
  3. lr_场景设计之知识点-集合点、loadgenerator
			
    1.controller原理 通过场景设计来模拟用户的真实操作并调用bugen中的脚本,再通过设置的压力机产生压力,在场景运行中实时监控用户的执行情况,tps,响应时间,吞吐量,服务器资源使用情况:  ...
    
			
    4. 
						
  4. ionic3+angular4的三方微信开发（登录and分享）
			
    登录: 1.在微信开放平台注册开发者帐号,并拥有一个已审核通过的移动应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 2.通过cordova添加微信插件:进 ...
    
			
    5. 
						
  5. js 调用后台，后台调用js
			
    <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat=" ...
    
			
    6. 
						
  6. __name__ __doc__  __package__
			
    __name__只有主程序调用才可以 如果自己的唯一入口被调用 if __name__ == '__main__' : 才执行下面的代码 """ 这个是format的注释 ...
    
			
    7. 
						
  7. python运算符与数据类型
			
    python运算符 Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 赋值运算符 逻辑运算符 位运算符 成员运算符 身份运算符 运算符优先级 以下假设变量: a=10,b=20: ...
    
			
    8. 
						
  8. Mysql数据字典导出
			
    1.phpmyadmin中自带的数据字典导出 2.利用下面的脚本: <?php /** * 生成mysql数据字典 */ header("Content-type: text/html ...
    
			
    9. 
						
  9. linux下jdk8安装
			
    --- 解压命令不管用 添加插件 yum install tar --- 上传命令不管用 添加插件 wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20 ...
    
			
    10. 
						
  10. Java小目标
			
    看了智联.内推和拉勾这三个招聘网站,除了智联外,其它招聘网站对岗位要求的描述都比较专业.大部分公司都要求会一些HTML5.JS,SSH等前端技术,所有公司都要求会使用Oracle.MySQL等数据库, ...
    
			
    11.