<!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. github隐藏文件&删除文件
			
    一.隐藏文件不提交至github 例如:需隐藏node_modules文件夹 1.找到.gitignore文件,一般这个是隐藏文件,需要显示隐藏文件 2.编辑.gitignore文件,加入下面这一句话 ...
    
			
    2. 
						
  2. java 使用GET请求编码问题解决
			
    java GET请求解决编码的有效代码前端: encodeURI(encodeURI("你好") 后端代码: String name = request.getParameter( ...
    
			
    3. 
						
  3. linux 7 关闭防火墙 开启sshd服务
			
    启动一个服务:systemctl start firewalld.service关闭一个服务:systemctl stop firewalld.service重启一个服务:systemctl rest ...
    
			
    4. 
						
  4. 使用Github Composer Packagist编写及发布扩展包
			
    1.在github中创建自己的仓库,然后本地clone,初始化composer init ,在composer.json中增加autoload "autoload": { &quo ...
    
			
    5. 
						
  5. 在Debian9服务器上安装最新版Python
			
    通过Xshell 6 远程连接linux服务器 安装前的准备工作 更新服务器: 命令:apt update && apt upgrade -y 安装python3的依赖库: 命令:ap ...
    
			
    6. 
						
  6. web前端学习python之第一章_基础语法(二)
			
    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
    
			
    7. 
						
  7. 简单Socket网络通信
			
    问题:编写一个网络应用程序,有客户端和服务端,客户端向服务端发送一个字符串(如"Hello Socket"),服务器收到该 字符串后将其打印到命令行上,然后向客户端返回该字符串的长 ...
    
			
    8. 
						
  8. js简单封装样式
			
    class Foo{ constructor(name) { this.name = name } greet() { console.log('hello this is',this.name) } ...
    
			
    9. 
						
  9. 网页链接跳转qq聊天界面以及QQ群是什么实现的
			
    网页可以唤起QQ群,这我们都知道可以做到,那如何唤起呢?下面就做一个简单的介绍,希望可以帮助到有需要的朋友 1.官方提供的几种加群的链接 官方的加群代码的获取前提是我们具有权限(也就是群主或管理权限) ...
    
			
    10. 
						
  10. K8S配置安装全过程
			
    V1.11.1https://github.com/kubernetes/kubernetes/releases/tag/v1.11.1环境准备:系统:centos7.2.1511[root@mast ...
    
			
    11.