<!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. 2n字符
			
    有2n字符挨个排成一排,前n个是'1',后n个是'0'.如 11110000(此时2n=8),现在交换字符的位置,使之按照 10101010 的模式排列.而且要使字符移动的次数最少,编程计算最少的移动 ...
    
			
    2. 
						
  2. zzw原创_mysql脚本打印出提示信息
			
    批量执行大量数据库脚本的时候,数据库脚本报错,要定位到哪个脚本,如果数据库脚本中不主动打印脚本信息比较困难 一.ORACLE 在oracle数据库脚本,可以借助prompt比如脚本中放如下语句: pr ...
    
			
    3. 
						
  3. .NET controller传给view的bool类型
			
    问题: 在view中访问该变量是False,不是字符串,也不是bool类型的false. 解决方法: controller: ViewBag.Test = false; view中得到false值:  ...
    
			
    4. 
						
  4. MySQL— 索引，视图，触发器，函数，存储过程，执行计划，慢日志，分页性能
			
    一.索引,分页性能,执行计划,慢日志 (1)索引的种类,创建语句,名词补充(最左前缀匹配,覆盖索引,索引合并,局部索引等): import sys # http://www.cnblogs.com/w ...
    
			
    5. 
						
  5. PHP7.X连接SQLSERVER数据库（CENTOS7）
			
    加入微软的源 curl https://packages.microsoft.com/config/rhel/7/prod.repo > /etc/yum.repos.d/mssqlreleas ...
    
			
    6. 
						
  6. SiteMesh3简介及使用
			
    所属专栏: Java开发经验记录   最近项目用到SiteMesh3,研究学习一段时间后决定写篇博文来记录收获. SiteMesh SiteMesh 介绍 工作原理 配置及使用 下载 1添加maven ...
    
			
    7. 
						
  7. web程序顺序
			
    1.org.apache.catalina.core.AprLifecycleListener init 2.Apache Tomcat Native library which allows opt ...
    
			
    8. 
						
  8. MAVEN项目环境搭建
			
    一.Maven的环境配置 apache-maven-3.5.4 Maven下载地址:http://maven.apache.org/download.cgi 选择下载  直接解压无需安装()下面配置M ...
    
			
    9. 
						
  9. H5横向滚动提示
			
    <marquee>啦啦啦,Hello World</marquee>
    
			
    10. 
						
  10. 从0到1用eclipse用maven搭建web项目
			
    1,默认已经搭建了JDK1.5以上,以及eclipseEE版本,和maven. 2,修改maven的本地仓库和镜像,修改本地仓库是为了方便我们管理,maven的默认仓库是在C盘的USER文件夹下,我一 ...
    
			
    11.