烏來 圖片大小:600x338
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChNGv7t72e3R_tLWBv8bcsiTDQvgnjmqtEmDASATYObzKpxbeQL1kdkdYqP0ql5GwW0vP1YalO-p0HjAU3wZhyniSGUDOhwtfB5cPLI8uS1GSPx1wFJP1AqnqYXTOZ3lBGzM9JkNqu58/s600-Ic42/wulai.jpg
十分瀑布 圖片大小:500x281
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZArDw4E9OeF_RpEVfwRWGjdMDDrwRY8iYh1WbVurwUVm3GXTPyUUJGNzsRWBfoRUTYkxySrAFRiRc21rFWyCkBNeLD8eeOK-NKJNoC1Z7M0IC1HrALpMvO9e2CkCE6kk-_7robhsGrRg/s500-Ic42/tenwaterfall.jpg
太子賓館 圖片大小:400x225
方法:
第1 個page , id : home
插入 bxslider元件 (在 extension components內)
Style : height:338px;width:100% (height改為三張圖片的最大高度值，以我的例子是338
切換到 HTML標籤
每一對 li 放一張圖片，請修改其height值(圖片高度)和src(圖片的來源網址)、title(滑鼠移到這張圖片，要顯示的文字) 。我用紅色的字標出。
<div id="home"
data-role="page">
<div role="main" class="ui-content">
<ul is="bxslider" style="height:338px;width:100%"
captions="true">
<li>
<img style="width:100%;height:338px"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChNGv7t72e3R_tLWBv8bcsiTDQvgnjmqtEmDASATYObzKpxbeQL1kdkdYqP0ql5GwW0vP1YalO-p0HjAU3wZhyniSGUDOhwtfB5cPLI8uS1GSPx1wFJP1AqnqYXTOZ3lBGzM9JkNqu58/s600-Ic42/wulai.jpg"
title="烏來">
</li>
<li>
<img style="width:100%;height:281px"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZArDw4E9OeF_RpEVfwRWGjdMDDrwRY8iYh1WbVurwUVm3GXTPyUUJGNzsRWBfoRUTYkxySrAFRiRc21rFWyCkBNeLD8eeOK-NKJNoC1Z7M0IC1HrALpMvO9e2CkCE6kk-_7robhsGrRg/s500-Ic42/tenwaterfall.jpg"
title="十分瀑布">
</li>
<li>
<img style="width:100%;height:225px"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiAansVu9T61acD7L8i7tH6Hop56zypBPYkhtbqSBkJ_yuY79FcfrcqHwMgWx_BLPYJ_XjSrd4laUxVYnfA0Lv6r4K_sSt9udOz8M-4vwrvOKlJ3L0oQeuMxOOEXml6P1TByaGcwyqXY/s400-Ic42/tai.jpg"
title="太子賓館">
</li>
</ul>
</div>
</div>
Resize :rotate ，因圖片寬度的數值比高度大，所以將面板旋轉。
第1 個page設計參考圖:
第1 個page執行參考圖:
