<!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. 2019/2/23Scala学习开始（Scala简介）
			
    Scala简介    Scala是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. Scala运行在Java虚拟机上,并兼容现有的Java程序 ...
    
			
    2. 
						
  2. 采用Tensorflow内部函数直接对模型进行冻结
			
    # enhance_raw.py # transform from single frame into multi-frame enhanced single raw from __future__  ...
    
			
    3. 
						
  3. 基于C#简单实现多个word文件和Excel文件的全局字符串替换
			
    公司整理文档工作中,出现了一个需要使用全局字符替换多个word文档.excel文档中的内容的需求.虽然office.WPS都有全局替换的功能(ctrl+h),但是文件过多,且需要替换多次,工作量还是比 ...
    
			
    4. 
						
  4. Debian9服务器安装mysql
			
    第一步    添加mysql软件源 下载mysql的配置文件: cd /tmp wget https://dev.mysql.com/get/mysql-apt-config_0.8.10-1_all ...
    
			
    5. 
						
  5. 维修数列 Splay(这可能是我写过最麻烦的题之一了。。。用平衡树维护dp。。。丧心病狂啊。。。。)
			
    题目来源BZOJ1500 这题的思路: 1.这题的话,稍微会splay的人,一般前面四个都不是问题..主要是最后的一个,要你在修改的同时要维护好最大字段和... 2.最大字段和其实就是区间合并.具体操 ...
    
			
    6. 
						
  6. 从码农到技术总监分享Leader经验
			
    从一个毕业的IT小伙或者一个码农成长为一个管理者,有很多需要转变的思想,那么当你遇到了瓶颈,或许我的经验能帮到你,感谢. 系统的掌握了.NET,JAVA技术,能够熟练的使用springcloud +  ...
    
			
    7. 
						
  7. css3 翻牌动画
			
    最近做了一个特效,css是从网上找的,地址是这个: CSS3 animate flip下的纸牌翻转效果实例页面 把其中核心的css代码扒出来如下: /* The properties in this  ...
    
			
    8. 
						
  8. wholesale custom weighted blankets / travel weighted blankets
			
    What is weighted blankets? Weighted blanket named heavy gravity blanket,for child and adult. Help re ...
    
			
    9. 
						
  9. <转载> UE4的Actor类C++简单尝试
			
    原文链接:   简书小小酥XX https://www.jianshu.com/p/2bcc80f0e789 一开始我用了一段时间UE4,发现如果用蓝图系统真的不太适合我的风格.因为之前一直都是用Un ...
    
			
    10. 
						
  10. Touch事件分发源码解析
			
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 以下源码基于Gingerbread 2.3.7 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1.先看ViewGroup的di ...
    
			
    11.