<!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. 按照分层设计理念，完成《XXX需求征集系统》的概念结构设计
			
    按照分层设计理念,完成<XXX需求征集系统>的概念结构设计. 1.概要架构-初步设计 有关<XXX需求征集系统>的鲁棒图如下: 2.概要架构之高层分割 切系统为系统: 高层功能 ...
    
			
    2. 
						
  2. php 类名和方法名相同(构造函数)
			
    //php 5.6class father{ public function __construct() { echo __METHOD__; }} class son extends father{ ...
    
			
    3. 
						
  3. SQL Pretty Printer for SSMS 很不错的SQL格式化插件
			
    写SQL语句或者脚本时,看到凌乱的格式就头大了,于是决心找一款SQL语句格式化的工具. 功夫不负有心人还真的被我找到一款很好用,很方便的SQL Server插件:SQL Pretty Printer  ...
    
			
    4. 
						
  4. myEclipse和eclipse从debug视图自动跳回default视图。
			
    本来是吐槽文,找到了解决的插件,就改改标题了. debug的时候,可以从default视图自动跳转到debug视图,退出debug的时候,却不能自动切换回default视图. https://bugs ...
    
			
    5. 
						
  5. C++标准模板库（STL）之Set
			
    1.Set的用法 Set:集合,一个内部自动有序而且不重复元素的容器.使用set,要加头文件#include<set>和using namespace std; 1.1.Set的定义 se ...
    
			
    6. 
						
  6. 磁盘当前目录下存在文件 c1.txt，其中存放了一段英文文字。请编程实现将c1.txt中英文文字全部转换为答谢字母，并保存到c2.txt中。要求：c2.txt文件前面保存的是c1.txt文案中的原始文字，后面紧跟着的是转换后的文字
			
    #include"stdio.h"#include"string.h" void main(){ FILE *fp1,*fp2; char ch[1000]=& ...
    
			
    7. 
						
  7. Chromedriver executable needs to be in path 解决办法
			
    执行webdriver.Chrome()时报错:Chromedriver executable needs to be in path. 原因可能是为有安装Chromedriver 可能是Chrome ...
    
			
    8. 
						
  8. leetcode 链表相关
			
    1.给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们 ...
    
			
    9. 
						
  9. HTML特殊字符编码对照表（备记）
			
    特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η Η Η Θ Θ Θ Ι Ι  ...
    
			
    10. 
						
  10. windows下Go升级及GoLand的安装激活
			
    之前在qor/China上问golang项目包有没有一键安装,有位朋友给出了回复: 于是,尝试了下升级Go,目前版本是1.10.1,现升级为为1.12.2.步骤如下: 一.下载安装包 下载地址:htt ...
    
			
    11.