页面的head部分，简单设置页面元素的样式，代码如下：

body {
    background: #eee none repeat scroll 0 0;
    color: #000;
    font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    /* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/

    /*bug:当内容超过一屏时，滚动条需要默认显示*/
    overflow-y: scroll;
    width: 100%;
}
body div{
    width: 100%;
}
.main {
    display: -webkit-flex;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    margin-bottom: 20px;
}

h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    margin-top: 25px;
}

<div class="main" ontouchstart="iosScrollBug()">
    <h3>基本例子</h3>
    <div id="sliderbasic"></div>
    <h3>垂直滚动</h3>
    <div id="slidervertical"></div>
    <h3>不定宽度</h3>
    <div id="slidervariableWidth"></div>
    <h3>无缝循环滚动</h3>
    <div id="sliderbasicloop"></div>
    <h3>多层级滚动</h3>
    <div id="slidermultipleSlide"></div>
</div>

页面的底部，需远程调用vue库，并引入本地JS文件启用插件，代码如下：

<script src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript" src="dist/build.js"></script>
<script type="text/javascript">
// ios 如果父层不进行touch事件的绑定，会造成子层不触发touch事件，猜想可能是事件的传递问题
function iosScrollBug(){}
</script>