平台默认提供的轮播组件是bootstrap的carousel，这个组件是左右轮播的，没有上下轮播的设置
如果需要上下轮播可以集成jquery的swiper插件实现
集成jquery插件的时需要注意插件用的jquery的版本，平台默认带的是1.11.1版本的，如果不是这个版本可能会有冲突
经测试swiper3可以在.w中直接集成，swiper4用的jquery的版本比平台默认的高不能直接集成需要用iframe嵌入html的方式实现
本例用的是swiper3，
1.下载swiper，解压到自己UI2相关目录
2.在自己的.w中引用1中解压的的swiper.min.js和swiper.min.css
如下：

	require("$UI/appdemo/swiper/swiper3/swiper.min");
	require("css!$UI/appdemo/swiper/swiper3/swiper.min").load();

3.在.w同名的css文件中添加如下样式

 .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

4.在.w中添加如下结果的dom节点，其中的img位置就是需要在轮播区域块中实现的内容，外层的div的class是固定的不能修改

  <div xid="div1" class="swiper-container"> 
    <div xid="div2" class="swiper-wrapper"> 
      <div xid="div3" class="swiper-slide"> 
        <img src="$UI/appdemo/swiper/image/p1.jpg" alt="" xid="image1"/>
      </div>  
      <div xid="div4" class="swiper-slide"> 
        <img src="$UI/appdemo/swiper/image/p2.jpg" alt="" xid="image2"/>
      </div>  
      <div xid="div5" class="swiper-slide"> 
        <img src="$UI/appdemo/swiper/image/p3.jpg" alt="" xid="image3"/>
      </div>  
      <div xid="div10" class="swiper-slide"> 
        <img src="$UI/appdemo/swiper/image/p4.jpg" alt="" xid="image4"/>
      </div>
    </div>  
    <div xid="div6" class="swiper-pagination"/>  
  </div>

5.在model的onLoad事件中如下实现

	Model.prototype.modelLoad = function(event) {
		new Swiper('.swiper-container', {
			pagination : '.swiper-pagination',
			paginationClickable : true,
			direction : 'vertical'
		});
	};

运行效果如下：
swiper