<!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 基础语法练习回顾
			
    #!/usr/bin/python# -*- coding: UTF-8 -*-import timeimport calendar student = {"age": 7,&qu ...
    
			
    2. 
						
  2. CDI Features(EL(SPEL),Decorator,Interceptor,Producer)
			
    一.EL(SPEL) EL 1.概述:EL是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进行数据类型 ...
    
			
    3. 
						
  3. Tensorflow常用的函数:tf.cast
			
    1.tf.cast(x,dtype,name) 此函数的目的是为了将x数据,准换为dtype所表示的类型,例如tf.float32,tf.bool,tf.uint8等 example:  import ...
    
			
    4. 
						
  4. K2签约龙光地产，为集团实现“千亿目标”保驾护航
			
    随着房地产行业步入成熟期,行业整合及转型速度变快,房企要在数字经济的背景下实现稳步发展,企业信息化建设是其中的重要一环.此次龙光地产选择与K2携手,用统一流程平台为集团保驾护航,向实现千亿目标迈进.  ...
    
			
    5. 
						
  5. DB2还原数据库备份
			
    用命令还原数据库备份 1.建立一个新的数据库db2 create db 数据库名 on 路径 using codeset GBK territory zh_CN 2.将需要恢复的数据库恢复得到这个新的 ...
    
			
    6. 
						
  6. 使用Spark进行搜狗日志分析实例——统计每个小时的搜索量
			
    package sogolog import org.apache.spark.rdd.RDD import org.apache.spark.{SparkConf, SparkContext} /* ...
    
			
    7. 
						
  7. c++ 指针、引用和取值；
			
    直接看代码: #include<iostream> using namespace std; int add(int *a,int *b){ int s; s = *a + *b; cou ...
    
			
    8. 
						
  8. ConcurrentHashMap实现原理
			
    ConcurrentHashMap是Java并发包中提供的一个线程安全且高效的HashMap实现(若对HashMap的实现原理还不甚了解,可参考我的另一篇文章HashMap实现原理及源码分析),Con ...
    
			
    9. 
						
  9. 运维架构之httpd
			
    Web Service 传输层:提供进程地址 Port number tcp:传输控制协议,面向连接,通信前需建立虚拟链路,结束后拆除:0-65535 udp:用户数据报协议,无连接:0-65535  ...
    
			
    10. 
						
  10. Python之元组方法
			
    def count(self, value): # 计算元素出现的个数 """ T.count(value) -> integer -- return number ...
    
			
    11.