<!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. [tomcat] tomcat简析(一)
			
    1.Tomcat的顶层结构 Tomcat中最顶层的容器叫Server,代表整个服务器,Server中包含至少一个Service,用于 具体提供服务. Service主要包含两部分:Connector和 ...
    
			
    2. 
						
  2. centos版本位数查看
			
    查看版本 cat /etc/issue cat /etc/redhat-release 查看位数 uname -a cat /proc/version   1. getconf LONG_BIT or ...
    
			
    3. 
						
  3. 配置rpm本地源及局域网环境下使用
			
    LInux个人开发过程中可以直接连到公网,所以想要安装各种软件时直接安装即可,但工作环境往往很让人头疼. 如果应用场景是没法链接外网的,公司内部绝大多数情况下是在自己的局域网下玩,这时候想装个软件是相 ...
    
			
    4. 
						
  4. powercli 学习随笔
			
    powercli就不多介绍了,基于powershell的好东西,可以百度 #PowerShell基本语法 # 注释 <# .... #> 多行注释 $VAR 所有变量的声明或者使用都需要加 ...
    
			
    5. 
						
  5. 安装vue 教程
			
    安装教程:https://www.cnblogs.com/zhaomeizi/p/8483597.html
    
			
    6. 
						
  6. es6（二）
			
    三 . 正则扩展: 1.构造函数的扩展 let regex = new Regex('xyz','i'); let regex2 = new Regex(/xyz/i);//test() 方法用于检测 ...
    
			
    7. 
						
  7. Android Studio之SVN打分支、切换分支及合并分支
			
    1.打分支: 右击项目--Subversion--Branch or Tag 点击OK,分支就创建成功了,接下来我们切换到分支v2 2.切换分支: 右击项目--Subversion--Update D ...
    
			
    8. 
						
  8. 【webpack学习笔记】a06-生产环境和开发环境配置
			
    生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...
    
			
    9. 
						
  9. AOP面向切面编程JAVA动态代理实现用户权限管理（实现篇）
			
    java动态代理机制的功能十分强大,使用动态代理技术能够有效的降低应用中各个对象之间的耦合紧密程度,提高开发的效率以及程序的可维护性,事实上Spring AOP就是建立在Java动态代理的基础之上.其 ...
    
			
    10. 
						
  10. 关于ijkplayer下载的demo不能运行，这是因为FFmpeg
			
    前提是你在Mac上已经配置了 homebrew 包管理工具 关于ijkPlayer的demo和framework的使用,也许当直接下载下来不能使用,这时候你需要再你下载的当前目录下运行,你看下自己的目 ...
    
			
    11.